Metodo toggleClass

Il metodo toggleClass alterna l'aggiunta/rimozione di una classe CSS: se non è presente la aggiunge, se è presente la rimuove.

Sintassi

Una classe CSS:

javascript$(selettore).toggleClass(nome classe);

Aggiungere o rimuovere la classe CSS solo in base al secondo parametro, che accetta valori true o false:

javascript$(selettore).toggleClass(nome classe CSS, stato);

Multiple classi CSS:

javascript$(selettore).toggleClass(['classe1', 'classe2', 'classe3', '...']);

Aggiungere o rimuovere le classi CSS solo in base al secondo parametro:

javascript$(selettore).toggleClass(['classe1', 'classe2', 'classe3', '...'], stato');

Applicazione di una funzione a ogni elemento nel set, lo stato può essere true o false, e indica al metodo di solo aggiungere o solo rimuovere la classe CSS:

javascript$(selettore).toggleClass(function(indice nel set, classi correnti dell'elemento, stato), [stato]);

Esempio

Il nostro paragrafo ha già due classi. Aggiungiamogli anche la classe www:

html<p id="test" class="eee ggg">testo</p>

javascript$('#test').toggleClass('www');

Il codice HTML risulterà così:

html<p id="test" class="eee ggg www">testo</p>

Esempio

E ora la classe www è già presente nell'elemento - rimuoviamola:

html<p id="test" class="eee ggg www">testo</p>

javascript$('#test').toggleClass('www');

Il codice HTML risulterà così:

html<p id="test" class="eee ggg">testo</p>

Vedi anche