Rad sa metodom toggleClass u jQuery

Postoji takođe koristan metod toggleClass, koji će dodati navedenu klasu, ako je nema, i ukloniti je ako postoji. Može biti potreban, da bi se klikom na isto dugme sa elementom stranice dešavale periodične promene.

Razmotrimo ovaj metod na primeru. Neka imamo sledeće CSS stilove:

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

Takođe imamo pasus sa klasom zzz:

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

Hajde da, na primer, napravimo tako da pri prvom pritisku na dugme, elementu bude dodata klasa red, koja dodaje crvenu boju, a pri ponovnom - ova klasa će biti uklonjena i crvena boja će nestati. Ako ponovo pritisnemo dugme - sve će se ponoviti.

Pokušajte da pokrenete sledeći kod i uverite se u ovo (klasa zzz označava kurzivom, da pokaže da toggleClass neće ometati druge klase da rade):

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

Nakon prvog pritiska HTML kod će izgledati ovako (biće dodata klasa red):

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

A nakon drugog pritiska - ovako (nestaće klasa red):

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

Dodajte svim li klasu www, ako je nema, i uklonite je, ako postoji.