.toggleClass() JQ Home  <<  A & P  <<  .toggleClass()

Toggling classes in CSS.

Description

The .toggleClass() method is used to add or remove the specified class(es) from each element of the matched set.

  • If no parameters are passed to the .toggleClass() method, the first time the method is activated all classes will be toggled off. To reactivate these classes you would then have to use the .toggleClass() method with parameters or the .addClass() method.

The .toggleClass( [ switch ] ) method was depercated in jQuery 3.0.

The .toggleClass( classNames [, switch ] ) method was added in jQuery 3.3.

Syntax

Signature Description
.toggleClass( [ switch ] ) **DEPRECATED 3.0**Remove all classes for each element within the matched set optionally filtered with a boolean switch.
.toggleClass( className [, switch ] )Toggle one or more classes for each element within the matched set optionally filtered with a boolean switch.
.toggleClass( classNames [, switch ] )Toggle an array of classes for each element within the matched set optionally filtered with a boolean switch.
.toggleClass( function(index, class [, switch] )Execute a function that returns one or more classes to be toggled from each element within the matched set optionally filtered with a boolean switch.

Parameters

Parameter Description Type
switchA JavaScript Boolean object or the boolean result of an expression. Boolean
classNameOne or more space-separated class names.String
classNamesAn array of class names.Array
function( index, class [, switch] )A function to execute on each element within the matched set.
  • Each time the callback runs, it is passed the current index position of the element in the set.
  • The existing class(es) pertaining to the current element are also passed.
  • The callback is fired in the context of the current element in the set, so the keyword this refers to that element.
Function

Return

A jQuery object.

.toggleClass( [ switch ] ) **DEPRECATED 3.0** Example A & P  <<  Top

Remove all classes for each element within the matched set optionally filtered with a boolean switch.

In the example below when we press the left button we toggle off (remove) all classes from the table below. Further clicks do nothing unles we add more classes through this or another method.

When we click the right button we check to see if the table below contains the class 'testtable'. If it doesn't it has been toggled off either through this button or the left button and we add the classes back to the table. If 'testtable' exists we set a boolean primitive to true and then use this primitive in our call to the .toggleClass( switch ) signature.

Table For Testing The .toggleClass( [ switch ] ) Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2


$(function(){
  $('#btn9').on('click', function() {
    $('.testtable').toggleClass(); 
  });
  
  $('#btn10').on('click', function() {
    var aBoolean = false;
    $('#table1').each(function (index, tableElement) { 
       if ($(this).hasClass('testtable')) { 
    	   aBoolean = true; // class exists
       };
    });
    if (aBoolean) {
    	alert('We are toggling the classes off');
    	$('.testtable').toggleClass( aBoolean );
    } else {
    	alert('We are adding the classes');
        $('#table1').addClass('jskeywordtable testtable');
    };
  });
});

Press the button below to action the above code:

          

.toggleClass( className [, switch ] ) ExamplesA & P  <<  Top

Toggle one or more classes for each element within the matched set optionally filtered with a boolean switch.

In the example below when we press the left button we toggle the 'turnAqua' class on and off to change table data in the table below to aqua or revert them to their original colour.

When we press the right button we check the table to see if the 'turnAqua' class exists and if so we toggle it off using a JavaScript Boolean object as the second parameter. If the 'turnAqua' class doesn't exist we toggle it on using a JavaScript Boolean object as the second parameter.


.turnAqua {
  background-color: aqua;
}

Table For Testing The .toggleClass( className [, switch ] ) Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2


$(function(){
  $('#btn11').on('click', function() {
    $('.testtable2').toggleClass('turnAqua'); 
  });
  
  $('#btn12').on('click', function() {
    trueBoolean = new Boolean(true);
    var aBoolean = false;
    $('.testtable2 tr').each(function (index, tableElement) { 
      if ($(this).hasClass('turnAqua')) { 
        aBoolean = true;
      };
    });
    if (aBoolean) {
        alert('We are toggling the turnAqua class off');
        $('.testtable2 tr').toggleClass('turnAqua', trueBoolean);
    } else {
        alert('We are toggling the turnAqua class on');
        $('.testtable2 tr').toggleClass('turnAqua', trueBoolean);
    };
  });
});

Press the button below to action the above code:

          

.toggleClass( classNames [, switch ] ) ExamplesA & P  <<  Top

Toggle an array of classes for each element within the matched set optionally filtered with a boolean switch.

In the example below when we press the left button we toggle the 'turnAqua' and 'turnColorWhite' classes on and off to change table data in the table below to aqua with white writing or revert them to their original colour.

When we press the right button we check the table to see if the 'turnAqua' class exists and if so we toggle it and the 'turnColorWhite' class off using a JavaScript Boolean object as the second parameter. If the 'turnAqua' class doesn't exist we toggle it and the 'turnColorWhite' class on using a JavaScript Boolean object as the second parameter.


.turnAqua {
  background-color: aqua;
}
.turnColorWhite {
  color:white;
}

Table For Testing The .toggleClass( className [, switch ] ) Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2


$(function(){
  $('#btn19').on('click', function() {
    $('.testtable5').toggleClass(['turnAqua', 'turnColorWhite']); 
  });
  
  $('#btn20').on('click', function() {
    trueBoolean = new Boolean(true);
    var aBoolean = false;
    $('.testtable5 tr').each(function (index, tableElement) { 
      if ($(this).hasClass('turnAqua')) { 
        aBoolean = true;
      };
    });
    if (aBoolean) {
        alert('We are toggling the turnAqua and turnColorWhite classes off');
        $('.testtable5 tr').toggleClass(['turnAqua', 'turnColorWhite'], trueBoolean);
    } else {
        alert('We are toggling the turnAqua and turnColorWhite classes on');
        $('.testtable5 tr').toggleClass(['turnAqua', 'turnColorWhite'], trueBoolean);
    };
  });
});

Press the button below to action the above code:

          

.toggleClass( function(index, class [, switch ] ) ExamplesA & P  <<  Top

A function returning one or more classes to be removed from each element within the matched set.

In the example below when we press the button we select all 'td' elements within the table with an id of 'testtable3'. We then iterate over the collection toggling (in this case removing) any classes. We end up with all rows returned to a colour of orange.

Table For Testing The .toggleClass( function(index, class) Signature
Table Row 1, Table Data 1  (class of turnYellow) Table Row 2, Table Data 1  (class of turnSilver)
Table Row 2, Table Data 1 Table Row 2, Table Data 2  (class of turnAqua)
Table Row 3, Table Data 1  (class of turnYellow) Table Row 3, Table Data 1  (class of turnAqua)
Table Row 4, Table Data 1 Table Row 4, Table Data 2  (class of turnOlive)


$(function(){
  $('#btn13').on('click', function() {
    $('.testtable3 td').toggleClass( function( index, class) {
      return class;
    });
  });
});

Press the button below to action the above code:


In the example below we never action anything as the Boolean we pass is set to false.

Table For Testing The .toggleClass( function(index, class, switch ) Signature
Table Row 1, Table Data 1  (class of turnYellow) Table Row 2, Table Data 1  (class of turnSilver)
Table Row 2, Table Data 1 Table Row 2, Table Data 2  (class of turnAqua)
Table Row 3, Table Data 1  (class of turnYellow) Table Row 3, Table Data 1  (class of turnAqua)
Table Row 4, Table Data 1 Table Row 4, Table Data 2  (class of turnOlive)


$(function(){
  $('#btn14').on('click', function() {
    var idValue = $(this).attr('id');     // btn14
    var toNum = idValue.charAt(4);        // 4
    aBoolean = new Boolean(toNum % 2);    // 0 so false
    alert(aBoolean);
    $('.testtable4 td').toggleClass( function( index, currentClass, aBoolean) {
      if (aBoolean) {
        return currentClass;
      }	else {
        return '';
      }
    });
  });
});

Press the button below to action the above code:

Related Tutorials

jQuery Basic Tutorials - Lesson 8 - Working With CSS Classes