3 Replies Latest reply on Mar 5, 2010 2:33 PM by Nick Belaevski

    hide/show div in rich faces

    satish kumar Newbie

      Hi,

      I need hide/show div implementations using rich faces(same as in demo's for source code).

       

      Could any one help me on this?

       

       

      Regards,

      Satish K

        • 1. Re: hide/show div in rich faces
          Andreas Hoehmann Newbie

          You can use jQuery ...

           

              <h3>Inside form</h3>   
              <h:form>
                <p>
                  <div id="div1">
                    Foobar 1<br/>Huhu
                  </div>
                  <div onclick="jQuery('#div1').hide();"
                       style="cursor: pointer; border: 1px solid black; width: 50px; background-color: #DDD;">Hide</div>
                  <!-- onclick return false to avoid submit-->
                  <button onclick="jQuery('#div1').show(); return false;"
                          style="cursor: pointer; border: 1px solid black;">Show</button>
                  <!-- onclick return false to avoid submit-->
                  <a4j:commandButton onclick="jQuery('#div1').slideToggle(600); return false;"
                                     style="cursor: pointer; border: 1px solid black;"
                                     value="Toggle"/>
                </p>
              </h:form>


              <h3>Without form</h3>
              <p>
                <div id="div2">
                  Foobar 1<br/>Huhu
                </div>
                <div onclick="jQuery('#div2').hide();"
                     style="cursor: pointer; border: 1px solid black; width: 50px; background-color: #DDD;">Hide</div>
              </p>

          • 2. Re: hide/show div in rich faces
            Harut Sargsyan Apprentice

            You can use a simple javascript by setting style of the div "display:none"

             

            function showHide() {
                  var divElementStyle = document.getElementById('divId').style;
                  if(divElementStyle.display == ""){
                         divElementStyle.display = "none";               
                  } else {
                         divElementStyle.display = "";
                  }                 
            }

             

            Regards, Harut.

            • 3. Re: hide/show div in rich faces
              Nick Belaevski Master

              Hello,

               

              If you want exactly the same functionality as on demo, use rich:effect component.