jQuery deactivate click event on one div when another div is clicked

Question

I'm currently making a website and I have 2 clickable divs "#coloursettings" and "#powersettings" both successfully unbind the menu ("#tab a") but I want each clickable div to deactivate the other, then re-activate it when clicked again. I've tried entering the corresponding ID into the same method that unbinds/binds the "#tab a" but it doesn't deactivate the other clickable div. Can anyone help make this work?

//Colour Settings Menu//
var clicked1 = true;
$("#coloursettings").click(function() {
    $("#colourselect").toggle();

    $(".content, .tab").toggleClass('blur');

    if (clicked1) {
        $("#tab a").unbind("click", foo);
        clicked1 = false;
    }
    else {
        $("#tab a").click(foo);
        clicked1 = true;
    }       
});

//Power Menu//
var clicked = true;
$("#powersettings").click(function() {
    $("#powermenu").toggle();

    $(".content, .tab").toggleClass('blur');

    if (clicked) {
        $("#tab a").unbind("click", foo);
        clicked = false;
    }
    else {
        $("#tab a").click(foo);
        clicked = true;
    }       
});

Relevant HTML

<div class="icon" id="coloursettings">...</div>
<div class="icon" id="powersettings">...</div>

Here's a link to my JSFiddle

Answer 1

I'm not sure if I understood your needs properly or not, still tried to help you . see the below link if your needs are satisfied or not..

//Colour Settings Menu//
var clicked1 = false;
$("#coloursettings").click(function () {
    if (clicked) {
        return;
    }
    $("#colourselect").toggle();
    $(".content, .tab").toggleClass('blur');
    if (clicked1) {
        //$("#tab a").unbind("click", foo);
        clicked1 = false;
    } else {
        //$("#tab a").click(foo);
        clicked1 = true;
    }
});
//Power Menu//
var clicked = false;
$("#powersettings").click(function () {
    if (clicked1) {
        return;
    }
    $("#powermenu").toggle();
    $(".content, .tab").toggleClass('blur');
    if (clicked) {
        //$("#tab a").unbind("click", foo);
        clicked = false;
    } else {
        //$("#tab a").click(foo);
        clicked = true;
    }
});
//foo
function foo(e) {
    if(clicked || clicked1)
    {
        return;
    }
    hideContentDivs();
    var tmp_div = $(this).parent().index();
    $('.main #content').eq(tmp_div).fadeIn(1000);
}

See This

Answer 2

You have several elements with id="tab", don't do that. $('#tab') will only select one node. If you don't need the ids, just use classes : $('.tab') or $('.menu .tab').

If I understand correctly : you are trying to "disable" a links with custom click handlers.
One way to do this is to use a marker class (for example : disabled) and have your handler check if that class is present :

var clicked1 = false;
$("#coloursettings").click(function(){
     ...
     clicked1 = !clicked1;
     $('.menu .tab a').toggleClass('disabled', clicked1);
});

// in your $('.menu .tab a').click() handler :
$('.menu .tab a').click(function(){
    if ( $(this).hasClass('disabled') ){
        return; // don't do anything if disabled
    }

    //otherwise : do stuff
});

Answer 3

Try disabling and enabling clicking on the divs:

Disable div click events

Answer 4

As previously mentioned, you are using id's multiple times in your markup. An id can only be used once per page.

That said, to disable a "button" in jquery, do something like this:

Add the following to the beginning of your $("#coloursettings").click function:

 $("#powersettings").addClass("disabled");

Then, add this to the beginning of the $("#powersettings").click function:

 if ($(this).hasClass("disabled")) {
    exit;
 }

See the fiddle: http://jsfiddle.net/6W5Hv/3/

Then just do the same thing for the other button.

But the most important thing to remember... ID's only once per page!! ;-)