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() {
      $('#Application1Div').show();
      $('#Application2Div').hide();
    });
    $('#Application2').click(function() {
      $('#Application2Div').show();
      $('#Application1Div').hide();
    });
    
    Reply
  2. Here is a real basic example: http://jsfiddle.net/YBABG/1/

    <div class="parentNode a1">Application 1
        <div class="childNode">Information</div>
    </div>
    <div class="parentNode a2">Application 2
        <div class="childNode">Information</div>
    </div>
    
    
    $(".childNode").hide();
    
    $(".parentNode").click(function(){
       $(".childNode").hide(100);
       $(this).children().show(100);
    });
    

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

    Reply
  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
    
    Reply

Leave a Comment