.toggleClass() method in Jquery

Description:

The jQuery toggleCLass() method is used to add or remove one or more classes from the selected elements. In simple, the toggleClass() method checks each element for the specified class names. If the class name is already presented for the selected element then it will remove else it will add the class.

Syntax

$(selector).toggleClass(classname,function(index,currentclass),state)

className	It specify One or more class names to add/remove from the selected set. More than one class name will be separated by the empty space
function(index,currentclass)	A function that returns one or more class names to remove index : Returns the index position of the matched element currentclass : Returns the current class name of the matched element
state	It specity the boolean value for the class should be added or removed. add: true , remove: false

Example:

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .CustomClass {
 border:2px soli<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .defaultClass {
 border: 5px solid #eed5b7;
 padding: 10px;
 width: 400px;
 height: 100px;
 background-color: #eed5b7;
 }

 .CustomClass {
 border: 5px solid #4cff00;
 font-size: 25px;
 background-color: #4cff00 !important;
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 $('#divCssBoard').toggleClass("CustomClass");
 })
 });
 </script>
</head>
<body>
 <button class="btnClass" id="addMethod">Toggle CSS Class</button><br/><br />
 <div id=divCssBoard class="defaultClass">
 Welcome to dotnet-helpers.com
 </div>
</body>
</html>

<html>

<head>

<style>

.CustomClass {

border:2px soli<html>

<head>

<style>

.defaultClass {

border: 5px solid #eed5b7;

padding: 10px;

width: 400px;

height: 100px;

background-color: #eed5b7;

}

.CustomClass {

border: 5px solid #4cff00;

font-size: 25px;

background-color: #4cff00 !important;

}

</style>

$(document).ready(function () {

$('.btnClass').click(function () {

$('#divCssBoard').toggleClass("CustomClass");

})

});

</script>

</head>

<body>

<button class="btnClass" id="addMethod">Toggle CSS Class</button><br/><br />

Welcome to dotnet-helpers.com

</div>

</body>

</html>

Output:

As per code, on clicking of “Toggle CSS Class” button, the toggleClass method will verify the selected div with the “CustomClass”, if its not present then it will add the class else it will remove the class as shown below.

.toggleClass() method in Jquery