jQuery toggleClass Method with Example

Today, We want to share with you toggleclass jquery.In this post we will show you remove class jquery, hear for jquery toggleclass animate we will give you demo and example for implement.In this post, we will learn about JQuery Toggle Class To Switch Between Classes with an example.

jQuery toggleClass Method

jQuery toggleClass() Method The toggleClass() method toggles between adding class and removing class one or more means multiple class names from the selected elements.

jquery toggle between two classes

Example 1:

<!DOCTYPE html>
<html>
<head>
<title>jQuery Demo example - www.pakainfo.com</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js">
 </script>
<script type="text/javascript">
         $(document).ready(function(){ 
           $( "#toggleClassExample" ).on( "click", function(event) {             
                $("#toggleClass").toggleClass('myClass');               
              });  
          });
</script>
<style>
div{
margin:11px;
min-height:50px;
min-width:100%;
border:1px solid blue;
float:left;

}
.myClass{
border:1px solid red;
background:green;
}
</style>

</head>	
<body>
<h4><a href="javascript:void(0);" id="toggleClassExample">Click to run .toggleClass() Example </a></h4> 

<div id="toggleClass" class="myClass">
The toggleClass() method toggles between adding and removing one or more class names from the selected elements.
</div>



</body>
</html>

jquery toggle multiple classes

Example 2:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggleClass("pakainfo");
  });
});
</script>
<style>
.pakainfo {
  font-size: 150%;
  color: green;
}
</style>
</head>
<body>

<button>Toggle class HTML "pakainfo" for p elements</button>

<p>This is a Online Server for User Review.</p>
<p>This is another Online Server for User Review.</p>
<p><b>Note:</b> Trigger the Logical button more than once to display the toggle effect.</p>

</body>
</html>

jQuery onclick toggle class name

Example 3: jQuery has a toggleClass function:

<button class="switch">Trigger me</button>

<div class="text-block collapsed pressed">Welcome to Pakainfo</div>

<script>    
    $('.switch').on('click', function(e) {
      $('.text-block').toggleClass("collapsed pressed");
      e.preventDefault();
    });
</script>

I hope you get an idea about addclass jquery.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.