.toggleClass()

jQuery

previous page next page

.toggleClass()

Categories: Attributes | Manipulation > Class Attribute | CSS

.toggleClass( className ) Returns: jQuery

Description: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.

  • version added: 1.0.toggleClass( className )

    • className
      Type: String
      One or more class names (separated by spaces) to be toggled for each element in the matched set.

  • version added: 1.3.toggleClass( className, switch )

    • className
      Type: String
      One or more class names (separated by spaces) to be toggled for each element in the matched set.
    • switch
      Type: Boolean
      A Boolean (not just truthy/falsy) value to determine whether the class should be added or removed.

  • version added: 1.4.toggleClass( [switch ] )

    • switch
      Type: Boolean
      A boolean value to determine whether the class should be added or removed.

  • version added: 1.4.toggleClass( function(index, class, switch) [, switch ] )

    • function(index, class, switch)
      Type: Function()
      A function that returns class names to be toggled in the class attribute of each element in the matched set. Receives the index position of the element in the set, the old class value, and the switch as arguments.
    • switch
      Type: Boolean
      A boolean value to determine whether the class should be added or removed.

This method takes one or more class names as its parameter. In the first version, if an element in the matched set of elements already has the class, then it is removed; if an element does not have the class, then it is added. For example, we can apply .toggleClass() to a simple <div>:

1
 
                                

                                  

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

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

1
 
                                

                                  

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

The second time we apply $('div.tumble').toggleClass('bounce'), the <div> class is returned to the single tumble value:

1
 
                                

                                  

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

Applying .toggleClass('bounce spin') to the same <div> alternates between <div class="tumble bounce spin"> and <div class="tumble">.

The second version of .toggleClass() uses the second parameter for determining whether the class should be added or removed. If this parameter's value is true, then the class is added; if false, the class is removed. In essence, the statement:

1
 
                                

                                  

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

is equivalent to:

1
2
3
4
5
6
 
                                

                                  

                                    if (addOrRemove) {
                                  

                                

                                

                                  

                                        $('#foo').addClass(className);
                                  

                                

                                

                                  

                                      }
                                  

                                

                                

                                  

                                      else {
                                  

                                

                                

                                  

                                        $('#foo').removeClass(className);
                                  

                                

                                

                                  

                                      }

As of jQuery 1.4, if no arguments are passed to .toggleClass(), all class names on the element the first time .toggleClass() is called will be toggled. Also as of jQuery 1.4, the class name to be toggled can be determined by passing in a function.

1
2
3
4
5
6
7
 
                                

                                  

                                    $('div.foo').toggleClass(function() {
                                  

                                

                                

                                  

                                      if ($(this).parent().is('.bar')) {
                                  

                                

                                

                                  

                                        return 'happy';
                                  

                                

                                

                                  

                                      } else {
                                  

                                

                                

                                  

                                        return 'sad';
                                  

                                

                                

                                  

                                      }
                                  

                                

                                

                                  

                                    });

This example will toggle the happy class for <div class="foo"> elements if their parent element has a class of bar; otherwise, it will toggle the sad class.

Examples:

Example: Toggle the class 'highlight' when a paragraph is clicked.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                        p { margin: 4px; font-size:16px; font-weight:bolder;
                                    

                                  

                                  

                                    

                                            cursor:pointer; }
                                    

                                  

                                  

                                    

                                        .blue { color:blue; }
                                    

                                  

                                  

                                    

                                        .highlight { background:yellow; }
                                    

                                  

                                  

                                    

                                        </style>
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        <p class="blue">Click to toggle</p>
                                    

                                  

                                  

                                    

                                        <p class="blue highlight">highlight</p>
                                    

                                  

                                  

                                    

                                        <p class="blue">on these</p>
                                    

                                  

                                  

                                    

                                        <p class="blue">paragraphs</p>
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

                                          $("p").click(function () {
                                    

                                  

                                  

                                    

                                            $(this).toggleClass("highlight");
                                    

                                  

                                  

                                    

                                          });
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>

Example: Add the "highlight" class to the clicked paragraph on every third click of that paragraph, remove it every first and second click.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                        p { margin: 4px; font-size:16px; font-weight:bolder;
                                    

                                  

                                  

                                    

                                            cursor:pointer; }
                                    

                                  

                                  

                                    

                                        .blue { color:blue; }
                                    

                                  

                                  

                                    

                                        .highlight { background:red; }
                                    

                                  

                                  

                                    

                                        </style>
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        <p class="blue">Click to toggle (<span>clicks: 0</span>)</p>
                                    

                                  

                                  

                                    

                                        <p class="blue highlight">highlight (<span>clicks: 0</span>)</p>
                                    

                                  

                                  

                                    

                                        <p class="blue">on these (<span>clicks: 0</span>)</p>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                        <p class="blue">paragraphs (<span>clicks: 0</span>)</p>
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

                                      var count = 0;
                                    

                                  

                                  

                                    

                                      $("p").each(function() {
                                    

                                  

                                  

                                    

                                        var $thisParagraph = $(this);
                                    

                                  

                                  

                                    

                                        var count = 0;
                                    

                                  

                                  

                                    

                                        $thisParagraph.click(function() {
                                    

                                  

                                  

                                    

                                          count++;
                                    

                                  

                                  

                                    

                                          $thisParagraph.find("span").text('clicks: ' + count);
                                    

                                  

                                  

                                    

                                          $thisParagraph.toggleClass("highlight", count % 3 == 0);
                                    

                                  

                                  

                                    

                                        });
                                    

                                  

                                  

                                    

                                      });
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>

Example: Toggle the class name(s) indicated on the buttons for each div.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                      .wrap > div { float: left; width: 100px; margin: 1em 1em 0 0;
                                    

                                  

                                  

                                    

                                                    padding=left: 3px; border: 1px solid #abc; }
                                    

                                  

                                  

                                    

                                      div.a { background-color: aqua; }
                                    

                                  

                                  

                                    

                                      div.b { background-color: burlywood; }
                                    

                                  

                                  

                                    

                                      div.c { background-color: cornsilk; }
                                    

                                  

                                  

                                    

                                      
                                        </style>
                                      
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        <div class="buttons">
                                      
                                    

                                  

                                  

                                    

                                        <button>toggle</button>
                                    

                                  

                                  

                                    

                                        <button class="a">toggle a</button>
                                    

                                  

                                  

                                    

                                        <button class="a b">toggle a b</button>
                                    

                                  

                                  

                                    

                                        <button class="a b c">toggle a b c</button>
                                    

                                  

                                  

                                    

                                        <a href="#">reset</a>
                                    

                                  

                                  

                                    

                                      
                                        </div>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <div class="wrap">
                                      
                                    

                                  

                                  

                                    

                                        <div></div>
                                    

                                  

                                  

                                    

                                        <div class="b"></div>
                                    

                                  

                                  

                                    

                                        <div class="a b"></div>
                                    

                                  

                                  

                                    

                                        <div class="a c"></div>
                                    

                                  

                                  

                                    

                                      
                                        </div>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

                                      var cls = ['', 'a', 'a b', 'a b c'];
                                    

                                  

                                  

                                    

                                      var divs = $('div.wrap').children();
                                    

                                  

                                  

                                    

                                      var appendClass = function() {
                                    

                                  

                                  

                                    

                                        divs.append(function() {
                                    

                                  

                                  

                                    

                                          return '<div>' + (this.className || 'none') + '</div>';
                                    

                                  

                                  

                                    

                                        });
                                    

                                  

                                  

                                    

                                      };
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      appendClass();
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      $('button').on('click', function() {
                                    

                                  

                                  

                                    

                                        var tc = this.className || undefined;
                                    

                                  

                                  

                                    

                                        divs.toggleClass(tc);
                                    

                                  

                                  

                                    

                                        appendClass();
                                    

                                  

                                  

                                    

                                      });
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      $('a').on('click', function(event) {
                                    

                                  

                                  

                                    

                                        event.preventDefault();
                                    

                                  

                                  

                                    

                                        divs.empty().each(function(i) {
                                    

                                  

                                  

                                    

                                          this.className = cls[i];
                                    

                                  

                                  

                                    

                                        });
                                    

                                  

                                  

                                    

                                        appendClass();
                                    

                                  

                                  

                                    

                                      });
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>
 POWERED BYHERONOTE
previous page start next page