Cara Toggle Kelas CSS dengan jQuery

Toggle berguna untuk tombol yang berganti status seperti mode gelap, menu, atau akordeon. Artikel ini membahas cara toggle kelas CSS dengan jQuery (toggleClass).

Metode .toggleClass()

<script>
$("#tombol").click(function() {
    $("body").toggleClass("gelap");
});
</script>

Bila kelas sudah ada, dihapus; bila belum, ditambahkan. Satu metode untuk dua aksi.

Contoh Kasus: Menu Hamburger

<script>
$("#hamburger").click(function() {
    $("#menu").toggleClass("buka");
    $(this).toggleClass("aktif");
});
</script>

Toggle Bersyarat

<script>
$("#item").toggleClass("selesai", sudahSelesai);
// tambah jika sudahSelesai true, hapus jika false
</script>

Kesimpulan

Gunakan .toggleClass() untuk membuat fitur on/off seperti mode gelap atau menu hamburger. Argumen kedua yang bernilai boolean memungkinkan toggle bersyarat.

Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi jQuery (api.jquery.com).

Baca Juga

Ali Akbar

Software Developer yang fokus mengembangkan aplikasi berbasis Web dan Desktop. Senang mempelajari teknologi baru terutama di bidang web design dan web development.

View all posts by Ali Akbar →

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *