Jquery – Disable/unbind click on active items, rebind click when inactive
- by j-man86
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!
