CODEWITHSUNDEEP
javascriptjqueryhtml
Damien
Damien

Reputation: 621

Toggling between two buttons using jQuery

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?

Upvotes: 0

Views: 5216

Answers (5)

bagofmilk
bagofmilk

Reputation: 1550

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; }

Upvotes: 1

sTx
sTx

Reputation: 1261

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>

Upvotes: -1

Damien
Damien

Reputation: 621

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.

Upvotes: 0

Nijeesh
Nijeesh

Reputation: 847

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();
});

Upvotes: 1

gaurav panwar
gaurav panwar

Reputation: 44

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);}
});

Upvotes: 1

Related Questions