Lavorare con il metodo toggleClass in jQuery

Esiste anche un utile metodo toggleClass, che aggiungerà la classe specificata, se non è presente, e la rimuoverà se è presente. Può essere utile quando si fa clic sullo stesso pulsante per far sì che con un elemento della pagina avvengano cambiamenti periodici.

Consideriamo questo metodo con un esempio. Supponiamo di avere i seguenti stili CSS:

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

C'è anche un paragrafo con la classe zzz:

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

Ad esempio, facciamo in modo che alla prima pressione del pulsante, all'elemento venga aggiunta la classe red, che aggiunge il colore rosso, e alla seconda - questa classe verrà rimossa e il colore rosso scomparirà. Se si preme nuovamente il pulsante - tutto si ripeterà.

Prova ad eseguire il seguente codice e verificalo da te (la classe zzz evidenzia il testo in corsivo, per mostrare che toggleClass non disturberà il funzionamento delle altre classi):

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

Dopo il primo clic il codice HTML apparirà così (verrà aggiunta la classe red):

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

E dopo il secondo clic - così (scomparirà la classe red):

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

Aggiungi a tutti gli li la classe www, se non è presente, e rimuovila se è presente.