jQuery Basic Tutorial

jQuery Effects

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

This method checks the specified class name for each element:

However, by usingstateParameters, you can specify to remove or add class names only.

Toggle class name:

$(selector).toggleClass(className)

UsingstateParameters for toggling class:

$(selector).toggleClass(className, state)

Use function to toggle class:

$(selector).toggleClass(function(index, currentClass), state)

Toggle the addition and removal of the 'anotherClass' class name between all <p> elements:

Example

$("button").click(function() {
　　$("p").toggleClass("anotherClass");
});

UsingstateParameters only add or remove class names:

Example

$("button").click(function() {
　　$("p").toggleClass("anotherClass", true);
});

Parameter	Description
className	Specify to add/One or more (separated by spaces) class names to be removed
state	A boolean value to determine whether to add (true) or remove the class (false)
function(index, currentClass)	A function that returns one or more (separated by spaces) class names, which will be added to or removed from the existing class names. index-Return the index position of the element in the collection currentClass-Return the current class name of the selected element