Cara Toggle Tampil Sembunyi Elemen dengan jQuery

Metode toggle menggabungkan hide dan show dalam satu perintah, ideal untuk panel buka-tutup. Artikel ini membahas cara toggle tampil sembunyi elemen dengan jQuery.

Metode .toggle()

<script>
$("#tombol").click(function() {
    $("#panel").toggle();
});
</script>

Bila elemen terlihat, disembunyikan; bila tersembunyi, ditampilkan.

Contoh Kasus: FAQ Buka-Tutup

<script>
$(".pertanyaan").click(function() {
    $(this).next(".jawaban").toggle("fast");
});
</script>

next(".jawaban") mengambil elemen jawaban tepat setelah pertanyaan yang diklik.

Dengan Animasi

<script>
$("#panel").toggle("slow");
</script>

Kesimpulan

Gunakan .toggle() untuk membuat elemen buka-tutup dengan satu perintah, sangat cocok untuk FAQ atau menu. Padukan dengan next() untuk menargetkan elemen jawaban yang berpasangan.

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 *