JQuery toggle unbind/bind

Question

As part of a site I'm trying to design I have a div with the id "powersettings" when clicked it toggles a div with the id "powermenu" and toggles the class "blur" on my "content" div and "tab a"s, this is all done successfully.

I'm trying to make my "tab a"s unbind(click) when "powersettings" is clicked, this is successful. However I want it to bind(click) when "powersettings" is clicked again to close the "powermenu"...can anyone tell me how to do this?

My relevant jQuery code:

$("#powersettings").click(function () {
    $("#powermenu").toggle();
    $(".content, .tab").toggleClass('blur');
    $("#tab a").unbind("click")
});

Thanks

Andrew

Update 1: ("#tab a") relates to code that changes my divs content based on menu selection:

$('#tab a').click(function(e){
  hideContentDivs();
  var tmp_div = $(this).parent().index();
  $('.main #content').eq(tmp_div).fadeIn(2000);
});

function hideContentDivs(){
    $('.main #content').each(function(){
       $(this).hide();
    });
}
    hideContentDivs();
    $('.main #content').eq(0).fadeIn(2000);});

Update 2: as requested heres my html code for the divs and power menu

<div class="menu">
<div class="tab" id="tab"><a href="#">Home</a></div>
<div class="tab" id="tab"><a href="#">Page 1</a></div><div class="tab" id="tab"><a href="#">Page 2</a></div>
<div class="tab" id="tab"><a href="#">Page 3</a></div>
</div>

Above is the HTML Code for the tabs and menu links. The power menu is simply a with the id and class "powermenu" as I haven't added anything to the div yet.

Answer 1

As function .toggle(fn1, fn2...) deprecated (See: http://forum.jquery.com/topic/beginner-function-toggle-deprecated-what-to-use-instead)

You can do like this:

var clicked = true;
$("#powersettings").click(function () {
    $("#powermenu").toggle();
    $(".content, .tab").toggleClass('blur');
    if (clicked) {
        $('#tab a').off('click',foo);
        clicked = false;
    }
    else {
        $('#tab a').on('click',foo);
        clicked = true;
    }
});

Here is a fiddle(http://jsfiddle.net/android/3U4sK/1/).

As your updated code, the foo function should like this:

function foo(e){
  hideContentDivs();
  var tmp_div = $(this).parent().index();
  $('.main #content').eq(tmp_div).fadeIn(2000);
}

Answer 2

This requires some small change in your code, but should solve.

1- Remove the unbind() line, as it will no longer be necessary:

$("#powersettings").click(function () {
    $("#powermenu").toggle();
    $(".content, .tab").toggleClass('blur');
    // $("#tab a").unbind("click") // remove this line
});

2- Add an if statmentent to the click() of #tab a:

$('#tab a').click(function(e) {
    if ($("#powermenu").is(':visible')) {
        return; // if #powermenu is not visible, do nothing (quit the function)
    }
    hideContentDivs();
    var tmp_div = $(this).parent().index();
    $('.main #content').eq(tmp_div).fadeIn(2000);
});

How it works: as you are toggling #powermenu's visibility ($("#powermenu").toggle();) on #powersettings' click ($("#powersettings").click(function () {...). You seem to want to #tab a's clicks have no effect while #powermenu is hidden. This code does that.