Toggle Class on Single Link?

Question

For the purpose of a mobile navigation button, i want the link to click (show menu) add active class and then, when you click the SAME link again (collapse menu) it removes the class.

$(function() {  
    $(".nav-mobile").click(function () {
        $(".nav-mobile").removeClass("active");
        $(this).addClass("active");
    });
});

This adds the active class on click, but doesn’t remove it when clicked again.

Is it possible to remove it?

Answer 1

You can use the toggleClass() function in jQuery. It does exactly what you want.

Check the api doc: https://api.jquery.com/toggleClass/

Answer 2

Use this code instead :

$(function() {  
    $(".nav-mobile").click(function () {
        $(".nav-mobile").not(this).removeClass("active");
        $(this).toggleClass("active");
    });
});

Answer 3

Try this

$(function() {
    $(".nav-mobile").click(function () {
        var $this = $(this);
        if( $this.hasClass('active')) {
            $this.removeClass('active');
        } else {
            $(".nav-mobile").removeClass("active");
            $this.addClass("active");
        }
    });
});