Jquery for making DIV visible/invisible

I am planning to show a tree structure and on clicking the tree structure I wanted a grid to be displayed. Since I have to show a prototype, I am thinking of using Jquery to show the following

Application1 (Onclick)

  • Display a <DIV> with data (similar to a grid)

Application 2 (Onclick)

  • Collapse Application 1 Div (invisible)
  • Application 2 DIV (visible)

so on..

Is there any example that is available that I can use to simulate this?

19 thoughts on “Jquery for making DIV visible/invisible”

  1. Assuming the div elements already exist on the page and you are just toggling their visibility:

    $('#Application1').click(function() {
    $('#Application2').click(function() {
  2. Here is a real basic example: http://jsfiddle.net/YBABG/1/

    <div class="parentNode a1">Application 1
        <div class="childNode">Information</div>
    <div class="parentNode a2">Application 2
        <div class="childNode">Information</div>

    Specifying a duration in hide will create a simple animated effect.

  3. JQuery’s hide but doesn’t remove the space and show

    $("#id").css({ visibility: 'hidden' }) // hidden element (not remove space)
    $("#id").css({ visibility: 'visible' }) // show element

Leave a Comment