Disable/unbind click on active items, rebind click when inactive

Question

I have a left-positioned navigation that shows/hides content on the right. Currently, when you click a link, it fades in the corresponding content on the right and adds an active class to that link. My problem is that if you click the active link again, the content on the right keeps on fading in again. I would like to unbind that click while the link is active, and if you click on another navigation link (subsequently removing the class from the previous link and adding it to the current one) rebind the click event to all inactive links.

Here is my current code:

    $('.mixesSidebar ul li').click( function() {
           //Get the attribute id
           var liId = $(this).attr('id');
           //removeClass active from all li's, addClass active to this
         $('.mixesSidebar ul li').removeClass('active');
         $(this).addClass('active');
           //Hide all content on the right
         $('.mixesContent ul').hide();
           //Find the content with the same class as the clicked li's ID, and fadeIn
         $('.mixesContent').find('.' + liId).fadeIn('slow');
});

Thanks so much for your help!

Answer 1

If I understand this correctly, I would just add an "active" or something class to the div that was faded in and then do a check to see if it has that class already or not and if it does, don't fade it.

Edit Because my description is clear as mud:

$('.mixesContent').find('.' + liId).addClass("active_list");

if (! $('.mixesContent').find('.' + liId).hasClass("active_list"){
  //do the fade
}

Answer 2

Surround the logic with:

if (!$(this).hasClass('active')) {
  ...
}

A lot more stable than unbinding and rebinding.

Answer 3

What if you checked if $( this ) was already active, and if not, then proceed with the code.

So, at the start of the function, go:

if( ! $( this ).hasClass( 'active' ) )
{
  // do stuff
}