jQuery .toggleClass(): Remove or Add Classes to Elements

jQuery toggleClass: Main Tips

• The jQuery .toggleClass() alternates between adding and removing the specified classes from the selected elements.
• Whether you add or remove a class depends on the parameters specified for the .toggleClass() jQuery command.

Learn to Use .toggleClass()

The jQuery .toggleClass() manipulates classes by either adding or removing them from specified HTML elements.

The example below adds a class to a <div> element:

$("button").click(() => {
    $("div").toggleClass("introduction");
});

Tip: to prevent the issue of jQuery .toggleClass() not working, clearly indicate classes to remove or add. Safer options are .addClass() and .removeClass().

This .toggleClass() jQuery syntax specifies classes to be toggled:

$(selector).toggleClass(class);

Alternatively, you can define a function, specifying the method which returns the classes to be toggled:

$(selector).toggleClass(function);

You may also indicate the state:

$(selector).toggleClass(class, state);

The optional state parameter has a boolean value specifying whether classes will be removed (false) or added (true).

Note: while previously you could name the state as the only parameter, this type of syntax has been deprecated in jQuery 3.0.