Práca s metódou toggleClass v jQuery

Existuje tiež užitočná metóda toggleClass, ktorá pridá zadanú triedu, ak neexistuje, a odstráni ju, ak existuje. Môže byť potrebná, aby pri kliknutí na rovnaké tlačidlo s prvkom stránky dochádzalo k periodickým zmenám.

Pozrime sa na túto metódu na príklade. Nech máme nasledujúce CSS štýly:

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

Tiež existuje odsek s triedou zzz:

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

Urobme napríklad to, aby pri prvom stlačení tlačidla, prvku pridala trieda red, ktorá pridáva červenú farbu, a pri opakovanom - táto trieda bude odstránená a červená farba zmizne. Ak znova stlačíte tlačidlo - všetko sa zopakuje znova.

Skúste spustiť nasledujúci kód a presvedčte sa o tom (trieda zzz zvýrazňuje kurzívou, aby ukázala, že toggleClass nebude prekážať iným triedam pracovať):

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

Po prvom stlačení HTML kód bude vyzerať takto (pridá sa trieda red):

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

A po druhom stlačení - takto (zmizne trieda red):

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

Pridajte všetkým li triedu www, ak neexistuje, a odstráňte, ak existuje.