Question

I am using show() and hide() in my jsp page, and it is working fine, but I am having trouble figuring out a way to hide my table once it is shown. HTML EX:

<button id="b1">show 1</button>
<button id="b2">show 2</button>
<div class="hidden" id="d1">
<div class="hidden" id="d2">

So basically I want to show div1 when button1 is clicked, and show div2 when button2 is clicked. I am using hide()/show() because I never want both to show at the same time. So here is my script:

  $('#b1').click(function(){
    $('#d1').show();
    $('#d2').hide();
  });

  $('#b2').click(function(){
    $('#d2').show();
    $('#d1').hide();
  });

So this works fine, as far as showing only one at a time, but I want to add some script to this to make it where if div2 is showing, I can click on button2 and make div2 hide, and the same thing for div1. I know this is confusing so if you have any questions please ask. thanks.

Answer 1

I think you need this

$('#b1').click(function(){
    $('#d2').hide();
     $('#d1').toggle();
});

$('#b2').click(function(){
     $('#d1').hide();
     $('#d2').toggle();

});