jQuery toggleClass()

The jQuery toggleClass() method adds or remove one or more classes of the selected element. If the class name is already added, toggleclass() method removes it and if the class name was removed earlier, it adds the class name, creating a toggle effect.




  • Classname is a compulsory parameter of jQuery toggleClass() method, as it specifies the class names to add or remove.


  • It is an optional parameter.
  • The function parameter is used to return the class names to be added or removed .


  • Index is an argument passed within the function.
  • It is used to give an index position to an element in the set.


  • This parameter returns the current class name of the selected element.


  • Switch is also an optional parameter, which specifies whether the class should be added or removed.

Example 1

<!DOCTYPE html>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
.main {  
	font-size: 200%;  
	color: red;  
<button>Toggle class</button>  

Try it

JS Bin on jsbin.com

Content Protection by DMCA.com
Please Share