hide/show div in rich faces

[sathish1712]

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

[ahoehma]

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>

[harut]

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.

[nbelaevski]

Hello,

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