jQuery toggleClass()

The method toggleClass() alternates between adding and removing the specified classes to the selected elements. Syntax
selector.toggleClass(class);

This method checks each element for the specified class names. The class names are added if missing, and removed if already set.

The following code create a toggle effect in your webpage. This method takes one or more class names as its parameter.
$("p").toggleClass("highlight1"); $("div").toggleClass("highlight2");
<p class="highlight1">This is a paragraph</p> <div class="highlight2"> This is a Div</div>

The above code would remove a class with one click and in second click it would again add the same class. As with the other methods, multiple class names can be provided, separated by a space.

run this source code Browser View

This is a paragraph

This is a Div

Full Source
<html> <head> <title>jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").toggleClass("highlight1"); $("div").toggleClass("highlight2"); }); }); </script> <style> .highlight1 { background:red; } .highlight2 { background:green; } </style> </head> <body> <p class="highlight1">This is a paragraph</p> <div class="highlight2"> This is a Div</div> <br> <button>Click me</button> </body> </html>