Bekerja dengan Metode toggleClass di jQuery

Ada juga metode yang berguna yaitu toggleClass, yang akan menambahkan kelas yang ditentukan jika tidak ada, dan menghapusnya jika sudah ada. Metode ini mungkin diperlukan agar dengan mengklik tombol yang sama, terjadi perubahan periodik pada elemen halaman.

Mari kita bahas metode ini dengan sebuah contoh. Misalkan kita memiliki gaya CSS berikut:

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

Juga ada paragraf dengan kelas zzz:

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

Sebagai contoh, mari kita buat agar saat tombol ditekan pertama kali, elemen akan ditambahkan kelas red, yang menambahkan warna merah, dan saat ditekan lagi - kelas ini akan dihapus dan warna merah akan hilang. Jika tombol ditekan lagi - semuanya akan terulang kembali.

Coba jalankan kode berikut dan buktikan sendiri (kelas zzz menampilkan teks dengan gaya miring, untuk menunjukkan bahwa toggleClass tidak mengganggu kerja kelas lain):

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

Setelah penekanan pertama, kode HTML akan terlihat seperti ini (kelas red akan ditambahkan):

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

Dan setelah penekanan kedua - akan terlihat seperti ini (kelas red hilang):

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

Tambahkan kelas www ke semua li jika tidak ada, dan hapus jika sudah ada.