jQuery remove class after second click

Question

I have my own drop down navigation working, so when a user clicks on one of the links a page overlay will appear. I just need when they click again the page overlay removes.

Here is my code to add the overlay

$('#nav li a').on('click', function(){
    $('#page-overlay').addClass('active').siblings().removeClass('active');
});

And a working DEMO is here - http://dsm.fishtankcreative.co.uk/

I just need help for when a user clicks off the navigation the page overlay class disappear.

Thanks in advanced.

Answer 1

Use toggleClass()

$('#nav li a').on('click', function(){
    $('#page-overlay').toggleClass('active').siblings().removeClass('active');
});

Note: I don't think there is a need to use .siblings().removeClass('active') , as you are not adding the active class to any other elements