JQuery in order to make the div visible / invisible

Question

I plan to show the tree structure and by clicking on the tree structure, I wanted the grid to display. 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)

Appendix 2 (Onclick)

• Collapse application 1 Div (invisible)
• Appendix 2 Div (apparently)

and so on.

Is there any example that can be used to simulate this?

Answer 1

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 the duration of the hide will create a simple animated effect.

Answer 2

jQuery .show() and .hide() methodswill let you achieve your goal.

 $( 'your_selector' ).click( function() { $( '#application_1' ).hide(); $( '#application_2' ).show(); }); 

Answer 3

Assuming div elements already exist on the page, and you just switch their visibility:

 $('#Application1').click(function() { $('#Application1Div').show(); $('#Application2Div').hide(); }); $('#Application2').click(function() { $('#Application2Div').show(); $('#Application1Div').hide(); }); 

Answer 4

Here

improved demo

IMPROVED and happy coding!