Trabalhando com o método toggleClass no jQuery

Existe também um método útil toggleClass, que irá adicionar a classe especificada, se ela não estiver presente, e removê-la se estiver. Pode ser necessário para que, ao clicar no mesmo botão, ocorram mudanças periódicas com o elemento da página.

Vamos considerar este método com um exemplo. Suponha que temos os seguintes estilos CSS:

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

Há também um parágrafo com a classe zzz:

html<p class="zzz" id="test">texto</p>
<button>clique</button>

Vamos, por exemplo, fazer com que ao primeiro clique no botão, o elemento adicione a classe red, que adiciona a cor vermelha, e ao segundo clique - esta classe será removida e a cor vermelha desaparecerá. Se clicar no botão novamente - tudo se repetirá.

Tente executar o seguinte código e veja por si mesmo (a classe zzz destaca o texto em itálico, para mostrar que o toggleClass não atrapalhará o funcionamento de outras classes):

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

Após o primeiro clique, o código HTML ficará assim (a classe red será adicionada):

html<p class="zzz red" id="test">texto</p>
<button>clique</button>

E após o segundo clique - assim (a classe red desaparecerá):

html<p class="zzz" id="test">texto</p>
<button>clique</button>