The .toggleClass() Method

The jQuery .toggleClass() method alternates between adding/removing one or more classes from the selected element(s). For each of the selected element, this method checks the presence of specified classes. If the classes are present, they are removed, and if they are absent in the selected classes, they are added, thereby creating a toggle effect.

The syntax for using this method is as follows: 

				
				$(selector).toggleClass(class, state)

The parameters are described here:

class
Required. The class name to be added/removed.
state
Optional. A Boolean value determining whether the class should always be added (true) or removed (false).

For our example, we consider a CSS class called .crimson 

				
				.crimson {
					color: crimson;
				}

Here, using the .toggleClass() method, we will toggle the class .crimson for the only <p> element in the HTML document on click of the <button> element. 

				
				<!DOCTYPE html>
				<html lang="en">
				<head>
					<title>Title of this Page</title>
					<style>
						.crimson {
							color: crimson;
						}
					</style>
					<script type="text/javascript" 
						src="//code.jquery.com/jquery-latest.min.js">
					</script>
				</head>
				<body>
				    <p>Colour me Crimson</p> 
				    <button>Click Me</button>

				    <script type="text/javascript">
				    	$(document).ready(function(){
				    		$('button').click(function(){
				    			$('p').toggleClass('crimson');
				    		});
						});
				    </script>
				</body>
				</html>

When the button is clicked, the class .crimson is toggled, and the resulting page alternates between the two following looks:

We can achieve the same effect using the .is(), .addClass() and .removeClass() methods as shown below: 

				
				$(document).ready(function(){    	
					$('button').click(function(){
						if ($('p').is('.crimson')) {
						    $('p').removeClass('crimson');
						}
						else{
						    $('p').addClass('crimson');
						}
					});
				});

Now, with jQuery, we can also toggle multiple classes.

Toggling Multiple Classes

Suppose besides .crimson you have another class to add 

					
					.box {
						border: 1px solid teal;
					}

You can apply .toggleClass('crimson box') to the <p> element as shown here 

					
					$('button').click(function(){
						$('p').toggleClass('crimson box');
					});

and it will alternate between <p class="crimson box">Colour me Crimson</p> and the bare element <p>Colour me Crimson</p> with no class.

The state Parameter

Now we look into the case of the state parameter. If the value of the state argument is true, the class .crimson will always be added (regardless of the click) and if the value is false, it will never be added. For the below code, the paragraph will always be coloured crimson on click of the button

					
					$('button').click(function(){
						$('p').toggleClass('crimson', true);
					});

and for the below code, the class .crimson will never be added. 

					
					$('button').click(function(){
						$('p').toggleClass('crimson', false);
					});