.toggleClass()

Add or remove a class from each element in the set of matched elements.

Syntax

.toggleClass(className): className: A class name to be toggled in the class attribute of each element in the matched set
.toggleClass(className, addOrRemove): addOrRemove: A Boolean indicating whether to add or remove the class
.toggleClass(function[, addOrRemove]): function: A function that returns a class name to be toggled in the class attribute of each element in the matched set. addOrRemove (optional): A Boolean indicating whether to add or remove the class

Return value

The jQuery object, for chaining purposes.

Description

For example, we can apply .toggleClass() to a simple <div> as follows:

 
<div class="tumble">Some text.</div>

The first time we apply $('div.tumble').toggleClass('bounce'), we get:

 
<div class="tumble bounce">Some text.</div>

The second time we apply $('div.tumble').toggleClass('bounce'), we get:

 
<div class="tumble">Some text.</div>

$('#foo').toggleClass(className, addOrRemove);

is equivalent to


if (addOrRemove) {
 $('#foo').addClass(className);
}
else {
 $('#foo').removeClass(className);
}

The .toggleClass() method allows us to indicate the class name to be toggled by passing in a function.


$('div.foo').toggleClass(function() {
 if ($(this).parent().is('.bar') {
    return 'happy';
 } else {
    return 'sad';
 }
});

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              $("p").click(function () {
                 $(this).toggleClass("blue");
              });
        });
    </script>
  </head>
   <style>
      .blue { color:blue; }
  </style>
  <body>
    <body>
      <p class=blue>A</p>
  </body>
</html>

Click to view the demo

Toggle DIV color

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
         $("#run").click(function(){
          $("div").toggleClass("colored");
        });
      });
    </script>
 <style>
  div { background:yellow; width:80px; height:80px; margin:5px; float:left; }
  div.colored { background:green; }
  </style>
  </head>
  <body>
  <button id="run">Run</button>
  <div>asdf</div>
  <div id="mover">asdf</div>
  <div>asdf</div>
  </body>
</html>

Click to view the demo