.toggleClass() – добавляет или удаляет заданный класс(ы) по принципу переключателя (добавляет, если элемент не содержит класса, и удаляет, если класс есть).

Функция имеет несколько вариантов использования:

.toggleClass( className )

Добавляет или удаляет заданный в className класс(ы). Если классов несколько, то в строке className они должны быть разделены пробелами.

• className — имя класса (или несколько имен, разделенных запятой).

.toggleClass( className, state )

Только добавляет или только удаляет классы в зависимости от параметра state.

• className — имя класса (или несколько имен, разделенных запятой).
• state – параметр имеет тип boolean. true — в случае добавления класса(ов), false — иначе.

.toggleClass( function [, state ] )

Переключает классы, список которых возвращает заданная пользователем функция.

• function(index, className, state ) — функция, которая возвращает строку с перечислением классов через пробел
  • index – позиция элемента в наборе;
  • className — имя класса (или несколько имен, разделенных запятой).
• state – параметр имеет тип boolean. true — в случае добавления класса(ов), false — иначе.

Примеры использования. Первый вариант

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

Сначала при работе $( "div.tumble" ).toggleClass( "bounce" ) получим:

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

При втором использовании $( "div.tumble" ).toggleClass( "bounce" ) класс bounce будет удален.

При работе $( "div.tumble" ).toggleClass( "bounce spin" ) по аналогии с первым примером получим:

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

При повторном использовании оба класса будут удалены.

Примеры использования. Второй вариант

Во втором примере передадим аргумент addOrRemove, который в зависимости от условий будет принимать значение true или false:

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

это эквивалент:

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

Примеры использования. Третий вариант

В третьем примере напишем функцию для определения того, какой класс нужно добавить элементу:

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

Если у элемента <div class="foo">  есть класс bar, то добавим ему класс happy в другом случае sad.