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
|
| 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.