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: 
I think you need this

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

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

});

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

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

```