.toggleClass()

Syntax and Description

.toggleClass() adds or removes a class from each element in the set of matched elements.

.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

Its return value is the jQuery object, for chaining purposes.

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);
}/*from www  .  j a va 2 s  .co m*/
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 {//  w ww.  ja  v  a2s. co m
    return 'sad';
 }
});

Toggle single class

The following code toggles single class for paragraph during the click event.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from w  w w  .j  a va2s  . co  m-->
              $("p").click(function () {
                 $(this).toggleClass("blue");
              });
        });
    </script>
  </head>
   <style>
      .blue { color:blue; }
  </style>
  <body>
    <body>
      <p class=blue>java 2s.com</p>
  </body>
</html>

Click to view the demo

The code above generates the following result.

Toggle div element color

The following code toggles DIV element color.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){<!--from   ww w. ja  v  a 2 s . c  om-->
         $("#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>java2s.com</div>
  <div id="mover">java2s.com</div>
  <div>java2s.com</div>
  </body>
</html>

Click to view the demo

The code above generates the following result.