Working with the toggleClass method in jQuery

There is also a useful method toggleClass, which will add the specified class if it does not exist, and remove it if it does. It may be needed to make periodic changes to a page element when clicking on the same button.

Let's look at this method using an example. Let's say we have the following CSS styles:

.red {
	color: red;
}
	
.zzz {
	font-style: italic;
}

There is also a paragraph with class zzz:

<p class="zzz" id="test">text</p>
<button>click</button>

Let's, for example, make it so that when you first click the button, the element will be added the class red, which adds red color, and when you click it again, this class will be removed and the red color will disappear. If you click the button again, everything will repeat again.

Try running the following code to see this (the zzz class is italicized to show that toggleClass won't prevent other classes from working):

$('button').click(function() {
	$('#test').toggleClass('red');
});

After the first click, the HTML code will look like this (class red will be added):

<p class="zzz red" id="test">text</p>
<button>click</button>

And after the second press - like this (the class red will disappear):

<p class="zzz" id="test">text</p>
<button>click</button>

Add all li class www if it doesn't exist, and remove it if it does.