Question

I’ve got a side navigation where a user can click on a link which then toggles a panel with options for that section. My problem with this at the moment is i need to be able to remove the class when a user clicks on the same link to hide the panel.

Right now the ‘active’ state is getting left on the link. It works fine when your clicking from one link to another, but id like it to also remove the ‘active’ state if someone wishes to hide the menu. The ‘active’ class is shown with the cyan highlight on the menu.

jsFiddle: http://jsfiddle.net/visualdecree/4A23Z/11/

jQuery:

$(".sn a").on('click',function(){

    var panID = $("#" + $(this).data('panel') );

    $("div[id*='sn-pan-']")
    .stop()
    .hide({slide:'toggle'}, 400);

    $(panID)
    .css({'left' : '100px','overflow':'visible'})
    .stop()
    .animate({width:'toggle'}, 400)
});

$('.sn').click(function(){
    $('ul.sidenav li').removeClass('active');                    
    $(this).stop(true,true).addClass("active");
});​

Answer 1

You can exclude the clicked item from the removeClass function, and toggle it instead like this

Changed from the jsFiddle provided below.

$('.sn').click(function(e) {
    $('ul.sidenav li').not(this).removeClass('active');
    $(this).stop(true, true).toggleClass("active");
});