Toggling between two buttons using jQuery

Question

I've seen a few articles about this dotted around but I cant seem to get their solutions to work for me.

What I have are two buttons which control the show() and hide() states of different div's. On page load both of the div's are set to .hide() as the user doesn't need to see them until clicked.

So, I have two buttons a and b which currently work perfectly however you can show() both div's at the same time which I don't want to happen. The current code resembles

$('#a-div).hide();
$('#b-div).hide();
$('#a').click(function(){
    $('#a-div).toggle(500);
});
$('#b').click(function(){
    $('#b-div).toggle(500);
});

So how can I re-write this so that if #a-div is visible (already tried the .is(':visible') method) and #b is clicked nothing happens until #a-div is hidden again and vis versa?

Answer 1

probably you need to apply concept like this 

$('#a-div).hide();
$('#b-div).hide();
$('#a').click(function(){
if ($('#b').isVisible)[you can check via css property as well]
{
    $('#b-div).toggle(500); [or set css property visiblity:hidden]
    $('#a-div).toggle(500);
}
else {$('#a-div).toggle(500);}
});
$('#b').click(function(){
if ($('#a').isVisible)[you can check via css property as well]
{
    $('#a-div).toggle(500); [or set css property visiblity:hidden]
    $('#b-div).toggle(500);
}
else {$('#b-div).toggle(500);}
});

Answer 2

Try this

$('#a-div').hide();
$('#b-div').hide();
$('#a').click(function(){
    $('#a-div').toggle(500);
    if($('#b-div').is(":visible"))
        $('#b-div').hide();

});
$('#b').click(function(){
    $('#b-div').toggle(500);
    if($('#a-div').is(":visible"))
        $('#a-div').hide();
});

Answer 3

What I ended up doing is this

$('#a-div').hide();
$('#b-div').hide();

$('#a').click(function(){
    $('#a-div').toggle();
    $('#b-div').hide();
});
$('#b').click(function(){
    $('#b-div').toggle();
    $('#a-div').hide();
});

For anyone who is interested. Prior to this I was making this much more complex than it needed to be.

Answer 4

Another solution is to create a universal function and pass the parameters of the shown and hidden objects. This way you can use the same method for future elements:

function toggleDivs($show, $hide) {
    $show.toggle();
    $hide.hide();
}
$("#b").on("click", function() { toggleDivs($("#b-div"), $("#a-div")); });
$("#a").on("click", function() { toggleDivs($("#a-div"), $("#b-div")); });

The only item missing is to initially hide the div objects, but I would add a css class to the objects to hide them.

HTML

<button id="a">Show A</button>
<button id="b">Show B</button>

<div id="a-div" class="hideDiv">A</div>
<div id="b-div" class="hideDiv">B</div>

CSS

.hideDiv { display:none; }

Answer 5

 var $aDiv = $('#a-div'); var $bDiv = $('#b-div'); var $aBtn = $('#a'); var $bBtn = $('#b'); $aDiv.hide(); $bDiv.hide(); $aBtn.click(function(){ $aDiv.toggle(500, function(){ if($aDiv.is(":visible")) $bBtn.prop("disabled",true); else $bBtn.prop("disabled",false); }); }); $bBtn.click(function(){ $bDiv.toggle(500, function(){ if($bDiv.is(":visible")) $aBtn.prop("disabled",true); else $aBtn.prop("disabled",false); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="a-div">div a</div> <div id="b-div">div b</div> <button id="a">btn a</button> <button id="b">btn b</button>