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

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
}