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.
Browser ViewThis is a paragraph
This is a Div
<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>
Related Topics