Question

Is there a way of disabling another link, the re-enabling them with the toggle function.

here is my script so far. I would like to disable ‘military’ when I’ve clicked on ‘Entertainment’, but then re enable the link when the toggle returns.

$("[href='#Entertainment']").click(function () {
$("#Entertainment").toggle("slow");

});


$("[href='#Military']").click(function () {
$("#Military").toggle("slow");

});

Is there anyway of doing this?

Answer 1

Ok, I figured it out…

Here is a working example FIDDLE

Setting up your html like so, giving the links an ID

<a id='Elink' href='#Entertainment'>Entertainment</a>
<a id='Mlink' href='#Military'>Military</a>
<div id='Entertainment'>EntertainmentContent</div>
<div id='Military'>Military Content</div>

Then on the click, after the toggle happens, a callback function checks to see whether the corresponding divider is visible, if it is, the other link is disabled, if not visible, then the other link is enabled

$("#Elink").on('click', eclick);    
$("#Mlink").on('click', mclick);


function mclick() {

        $("#Military").toggle("slow", function() {
            if ($("#Military").is(':visible')) {
                $("#Elink").attr('href', 'javascript:void(0);').off('click');
            } else {
                $("#Elink").attr('href', '#Entertainment').on('click', eclick);
            }
        });
}

function eclick() {
        $("#Entertainment").toggle("slow", function() {
            if ($("#Entertainment").is(':visible')) {
                $("#Mlink").attr('href', 'javascript:void(0);').off('click');
            } else {
                $("#Mlink").attr('href', '#Military').on('click', mclick);
            }
        });
}