The toggleClass() method adds and return one or more classes to HTML elements.
This method is equivalent to the addClass () and removeClass () methods when used together. It adds the certain classes to the elements but can also remove them when classes are present.


Syntax:

$(“selector”).toggleClass(“className”);









Example toggleClass() methods with onclick button

code:


<!DOCTYPE html>
<html>
 <head>
  <title>IT PRESENT</title>
  <style>

#content {
background-color: yellow;
}
h1 {
color: blue;
}
p {
color: yellow;
background-color:green;
}
.a {
background-image: url("images/graphic.jpg");
}
.b {
-webkit-text-fill-color:maroon;
-webkit-text-stroke: 1px white;
}
.c {
background-color:red;

}
.d {
background: none !important;
}
  </style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
 </head>
 
<body>

<div id="content">
   <h1>JQUERY EXAMPLE</h1>
   <h2>toggleClass() method</h2>
   <p>Javascript Language</p>

   <button>CLICK HERE</button>

</div>

<script>
$(document).ready(function(){
    $("button").click(function(){
         $("#content").toggleClass("a");
         $("h1").toggleClass("b");     
         $("h2").toggleClass("c");     
         $("p").toggleClass("d");        
    });
});
</script>

 </body>
</html>

result: CLICK ONCE AND THEN PRESS THE BUTTON AGAIN

JQUERY EXAMPLE

toggleClass() method
Javascript Language





JSFiddle






Privacy Policy