Tutorials References Exercises Videos Menu
Create Website Get Certified Upgrade

jQuery toggleClass() Method

❮ jQuery HTML/CSS Methods

Example

Toggle between adding and removing the "main" class name for all <p> elements:

$("button").click(function(){
  $("p").toggleClass("main");
});
Try it Yourself »

Definition and Usage

The toggleClass() method toggles between adding and removing one or more class names from the selected elements.

This method checks each element for the specified class names. The class names are added if missing, and removed if already set - This creates a toggle effect.

However, by using the "switch" parameter, you can specify to only remove, or only add a class name.


Syntax

$(selector).toggleClass(classname,function(index,currentclass),switch)

Parameter Description
classname Required. Specifies one or more class names to add or remove. To specify several classes, separate the class names with a space
function(index,currentclass) Optional. Specifies a function that returns one or more class names to add/remove
  • index - Returns the index position of the element in the set
  • currentclass - Returns current class name of selected elements
switch Optional. A Boolean value specifying if the class should only be added (true), or only be removed (false)

Try it Yourself - Examples

Toggle between adding and removing a class name
How to use the toggleClass() method to toggle between adding and removing a class name.

Toggle classes using a function
Using a function to specify which class names should be toggled for the selected elements.

Using the switch parameter
How to use the switch parameter to only add or remove a class name.


❮ jQuery HTML/CSS Methods