Reputation: 1588
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
Reputation: 76268
You can check if something is visible by this $('#someDiv:visible')
and then do appropriate handling.
Upvotes: -1
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
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
Reputation: 69915
I think you need this
$('#b1').click(function(){
$('#d2').hide();
$('#d1').toggle();
});
$('#b2').click(function(){
$('#d1').hide();
$('#d2').toggle();
});
Upvotes: 1
Reputation: 2942
$('#b1').click(function(){
$('#d1').toggle();
});
$('#b2').click(function(){
$('#d2').toggle();
});
Upvotes: 0
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
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