Работа с методом toggleClass в jQuery

Существует также полезный метод toggleClass, который будет добавлять указанный класс, если его нет, и убирать его если он есть. Он может понадобится, чтобы по клику на одну и ту же кнопку с элементом страницы происходили периодические изменения.

Рассмотрим данный метод на примере. Пусть у нас есть следующие CSS стили:

css.red {
  color: red;
}
  
.zzz {
  font-style: italic;
}

Также есть абзац с классом zzz:

html<p class="zzz" id="test">text</p>
<button>click</button>

Давайте, например, сделаем так, чтобы при первом нажатии на кнопку, элементу будет добавляться класс red, который добавляет красный цвет, а при повторном - этот класс будет убираться и красный цвет будет пропадать. Если опять нажать на кнопку - все повторится опять.

Попробуйте запустите следующий код и убедитесь в этом (класс zzz выделяет курсивом, чтобы показать, что toggleClass не будет мешать другим классам работать):

javascript$('button').click(function() {
  $('#test').toggleClass('red');
});

После первого нажатия HTML код станет выглядеть так (добавится класс red):

html<p class="zzz red" id="test">text</p>
<button>click</button>

А после второго нажатия - так (исчезнет класс red):

html<p class="zzz" id="test">text</p>
<button>click</button>