CODEWITHSUNDEEP
javascriptjqueryhtml
Mr Man
Mr Man

Reputation: 1588

Using jQuery show() / hide()

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.

Upvotes: 0

Views: 164

Answers (7)

Mrchief
Mrchief

Reputation: 76268

You can check if something is visible by this $('#someDiv:visible') and then do appropriate handling.

Upvotes: -1

Andrew Jackman
Andrew Jackman

Reputation: 13976

You don't need to check anything, just toggle the first one and always hide the other one

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

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

Upvotes: 1

shabunc
shabunc

Reputation: 24851

if you don't use any animation, it is probably more useful to define a class in css, say, .hidden {display:"none"} and toggle it.

Thus, you code can be something like this:

$("#b1, #b2").click(function() { $("#d1, d2").toggleClass("hidden") })

Try this one, if you want, and tell us, whether it works )

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69915

I think you need this

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

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

});

Upvotes: 1

Corneliu
Corneliu

Reputation: 2942

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

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

Upvotes: 0

James Montagne
James Montagne

Reputation: 78780

I think you want this:

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

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

If you need to still make it so that only one can be shown then probably something like this:

$('#b1').click(function(){
    if($('#d1').toggle().is(":visible")){
       $('#d2').hide();
    }
});

$('#b2').click(function(){
    if($('#d2').toggle().is(":visible")){
       $('#d1').hide();
    }
});

Upvotes: 2

Jamie Dixon
Jamie Dixon

Reputation: 54021

There's a toggle() method that you can use instead of show/hide that will do this for you.

With no parameters, the .toggle() method simply toggles the visibility of elements:

Source: http://api.jquery.com/toggle/

Upvotes: 0

Related Questions