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.

Arun P Johny · Accepted Answer · 2014-09-24 08:41:50Z

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

answered Sep 24, 2014 at 8:41

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Barry Corrigan Over a year ago

Thats great thanks, but one question if you don't mind. link if you click on Kingfisher in the navigation it works but if you go from kingfisher to DSM then click off it doesn't work 100%

Barry Corrigan Over a year ago

I got it working by adding two page overlays then doing this

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

Collectives™ on Stack Overflow

jQuery remove class after second click

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related