Рад са методом toggleClass у jQuery

Постоји такође корисни метод toggleClass, који ће додати наведену класу, ако је нема, и уклонити је ако постоји. Може бити потребан, да би се кликом на исто дугме са елементом странице дешавале периодичне промене.

Размотримо овај метод на примеру. Нека имамо следеће CSS стилове:

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

Такође постоји пасус са класом zzz:

html<p class="zzz" id="test">текст</p>
<button>клик</button>

Хајде да, на пример, урадимо тако да при првом притиску на дугме, елементу буде додата класа red, која додаје црвену боју, а при поновним - ова класа ће бити уклоњена и црвена боја ће нестати. Ако поново притиснете на дугме - све ће се поновити.

Покушајте да покренете следећи код и уверите се у томе (класа zzz означава курзивом, да покаже да toggleClass неће сметати другим класама да раде):

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

После првог притиска HTML код ће изгледати овако (додаће се класа red):

html<p class="zzz red" id="test">текст</p>
<button>клик</button>

А после другог притиска - овако (нестаће класа red):

html<p class="zzz" id="test">текст</p>
<button>клик</button>