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

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

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

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

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

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

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

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

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

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

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

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

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

Добавьте всем `li` класс `www`, если его нет, и удалите, если есть.

←→
↑