Cara Menavigasi Elemen Bersaudara dengan jQuery

Berpindah antar elemen setingkat (bersaudara) berguna untuk akordeon, galeri, atau menandai satu item aktif di antara banyak. Artikel ini membahas cara menavigasi elemen bersaudara dengan jQuery (siblings).

siblings(), next(), prev()

<script>
$("#aktif").siblings(); // semua saudara (kecuali dirinya)
$("#aktif").next();     // saudara sesudahnya
$("#aktif").prev();     // saudara sebelumnya
</script>

Contoh Kasus: Menandai Satu Item Aktif

<script>
$(".menu-item").click(function() {
    $(this).addClass("aktif").siblings().removeClass("aktif");
});
</script>

Pola ini sangat ringkas: tandai yang diklik, hapus tanda dari semua saudaranya sekaligus.

Contoh Kasus: Akordeon

<script>
$(".judul").click(function() {
    $(this).next(".isi").slideToggle();
    $(this).parent().siblings().find(".isi").slideUp(); // tutup yang lain
});
</script>

Kesimpulan

Gunakan siblings(), next(), dan prev() untuk menavigasi elemen setingkat. Pola addClass().siblings().removeClass() sangat berguna untuk menandai satu item aktif, dan membuat akordeon yang menutup panel lain otomatis.

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 *