Práce s metodou toggleClass v jQuery

Existuje také užitečná metoda toggleClass, která přidá zadanou třídu, pokud není přítomna, a odstraní ji, pokud je. Může se hodit, když po kliknutí na stejné tlačítko s prvkem stránky mají nastat periodické změny.

Podívejme se na tuto metodu na příkladu. Předpokládejme, že máme následující CSS styly:

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

Také je zde odstavec s třídou zzz:

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

Udělejme například to, aby po prvním stisknutí tlačítka byl prvku přidán třída red, která přidává červenou barvu, a po opakovaném - tato třída bude odstraněna a červená barva zmizí. Pokud znovu stisknete tlačítko - vše se zopakuje.

Zkuste spustit následující kód a přesvědčte se o tom (třída zzz zvýrazňuje kurzívou, aby ukázala, že toggleClass nebude bránit práci ostatních tříd):

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

Po prvním stisknutí bude HTML kód vypadat takto (přidá se třída red):

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

A po druhém stisknutí - takto (zmizí třída red):

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

Přidejte všem li třídu www, pokud není přítomna, a odstraňte ji, pokud je.