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).

