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:

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

Takođe imamo pasus sa klasom zzz:

html<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):

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

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

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

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

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