CODEWITHSUNDEEP
javascriptjquerytoggle
kalls
kalls

Reputation: 2855

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?

Upvotes: 12

Views: 54481

Answers (5)

Infomaster
Infomaster

Reputation: 873

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

Upvotes: 2

Roko C. Buljan
Roko C. Buljan

Reputation: 206111

Here

improved DEMO

HAVE FUN & Happy coding!

Upvotes: 1

jbabey
jbabey

Reputation: 46647

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();
});

Upvotes: 1

George Cummins
George Cummins

Reputation: 28906

jQuery's .show() and .hide() methodswill allow you to accomplish your goal.

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

Upvotes: 4

Kevin Bowersox
Kevin Bowersox

Reputation: 94469

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.

Upvotes: 14

Related Questions