Halaman FAQ atau daftar persyaratan layanan sering butuh accordion supaya tidak memanjang ke bawah. Kamu bisa membuatnya sendiri dengan jQuery dalam beberapa baris, tanpa menarik plugin tambahan. Berikut langkahnya dari markup sampai animasi slide yang nyaman dilihat.
Menyiapkan Struktur HTML Accordion
Accordion yang baik dimulai dari markup yang jelas. Setiap item terdiri dari satu tombol pemicu dan satu panel isi. Pakai elemen button agar bisa difokus dengan keyboard, bukan div yang dipasangi click.
<div class="accordion">
<div class="acc-item">
<button class="acc-trigger" type="button" aria-expanded="false">
Apa itu accordion?
</button>
<div class="acc-panel">
<p>Panel berisi penjelasan singkat yang bisa dibuka dan ditutup.</p>
</div>
</div>
<div class="acc-item">
<button class="acc-trigger" type="button" aria-expanded="false">
Bagaimana cara menutupnya?
</button>
<div class="acc-panel">
<p>Klik judul yang sedang terbuka untuk menutup panelnya.</p>
</div>
</div>
</div>Atribut aria-expanded nanti ikut diperbarui oleh JavaScript. Ini membantu pembaca layar tahu apakah panel sedang terbuka atau tertutup.
Memberi Gaya Dasar dengan CSS
Panel disembunyikan lewat CSS, bukan lewat atribut hidden, karena slideToggle bekerja dengan properti display. Gaya minimalnya cukup begini:
.acc-item {
border-bottom: 1px solid #ddd;
}
.acc-trigger {
width: 100%;
text-align: left;
padding: 14px 16px;
background: none;
border: 0;
font-size: 16px;
cursor: pointer;
}
.acc-panel {
display: none;
padding: 0 16px 14px;
}Jangan tambahkan transition pada display. Properti itu tidak bisa dianimasikan, dan efeknya akan terasa kaku meskipun jQuery sudah terpasang.
Menulis Skrip jQuery untuk Membuka dan Menutup Panel
Inti accordion ada pada satu event klik yang memeriksa panel mana yang harus digeser. Pasang skrip setelah jQuery dimuat, atau bungkus dalam $(function(){ ... }) supaya DOM sudah siap.
$(function () {
$('.acc-trigger').on('click', function () {
var $tombol = $(this);
var $panel = $tombol.next('.acc-panel');
var terbuka = $tombol.attr('aria-expanded') === 'true';
$tombol.attr('aria-expanded', String(!terbuka));
$panel.stop(true, true).slideToggle(220);
});
});Pemanggilan stop(true, true) mencegah antrean animasi menumpuk saat pengguna mengklik cepat berkali-kali. Tanpa itu, panel bisa tersangkut di tengah tinggi dan terlihat patah. Kalau kamu belum nyaman dengan chaining seperti ini, artikel tips jQuery untuk pemula membahas cara kerja selector dan event dari awal.
Membuat Hanya Satu Panel Terbuka pada Satu Waktu
Banyak desain FAQ ingin panel lain menutup otomatis. Tambahkan satu blok sebelum panel yang diklik digeser:
$('.acc-panel').not($panel).slideUp(220);
$('.acc-trigger').not($tombol).attr('aria-expanded', 'false');Urutan penting. Tutup panel lain lebih dulu, baru buka yang baru, agar animasi tidak saling bertabrakan di ruang yang sama. Kalau halamanmu punya banyak item, penguncian seperti ini juga menjaga tinggi halaman tetap stabil.
Menangani Klik pada Elemen yang Ditambahkan Belakangan
Jika daftar FAQ diambil dari API dan dirender setelah halaman dimuat, event click yang dipasang langsung pada tombol tidak akan menempel. Gunakan event delegation pada wadahnya:
$('.accordion').on('click', '.acc-trigger', function () {
// isi handler sama seperti sebelumnya
});Pola ini juga lebih hemat memori karena hanya satu listener terpasang, berapa pun jumlah item yang muncul nanti. Teknik serupa dipakai saat membuat tombol load more dengan jQuery, karena tombol baru terus bertambah saat data dimuat.
Merapikan Animasi agar Terasa Halus
Durasi 200 sampai 250 milidetik sudah cukup untuk panel setinggi beberapa baris. Untuk panel panjang berisi tabel atau gambar, slideToggle bisa terasa tersendat karena jQuery menghitung tinggi di setiap frame. Dua pilihan yang lebih ringan:
- Pakai
slideToggledengan durasi pendek dan pastikan isi panel tidak memuat gambar besar tanpa dimensi tetap. - Ganti ke animasi CSS pada properti
max-heightdanopacity, lalu gunakan jQuery hanya untuk menambah atau melepas kelas.
Pilihan kedua cocok kalau kamu ingin animasi berjalan di compositor browser. Kamu perlu menentukan nilai max-height yang cukup besar, misalnya 600px, karena CSS tidak bisa menghitung tinggi konten secara otomatis.
Memeriksa Hasil dan Menjaga Kode Tetap Terbaca
Setelah semua berjalan, uji tiga hal: klik dengan keyboard memakai Tab lalu Enter, klik cepat berulang pada satu tombol, dan penambahan item baru lewat konsol. Ketiganya menguji bagian yang paling sering rusak pada accordion buatan sendiri.
Seiring proyek bertambah, file JavaScript biasanya ikut membengkak karena handler ditumpuk di satu tempat. Kebiasaan memisahkan skrip per komponen dan memberi nama fungsi yang jelas akan menghemat waktu saat debugging. Uraian soal itu ada di panduan cara menulis kode PHP, JS, dan CSS tetap rapi saat proyek bertambah. Untuk urusan memilih dan mengubah elemen, panduan manipulasi DOM dengan jQuery bisa jadi rujukan saat kamu perlu menambah kelas atau atribut secara dinamis.
Accordion jQuery yang rapi berdiri di atas tiga hal: markup dengan tombol dan panel yang jelas, CSS yang menyembunyikan panel tanpa mengganggu animasi, dan satu handler klik yang memakai stop serta event delegation. Sisanya soal selera, mau satu panel terbuka atau banyak sekaligus.
Pertanyaan yang Sering Diajukan
Kenapa panel accordion saya tidak mau terbuka sama sekali?
Periksa dua hal: apakah jQuery sudah dimuat sebelum skripmu, dan apakah selector .acc-trigger benar-benar cocok dengan elemen di halaman. Jika daftar dirender lewat AJAX, pastikan kamu memakai event delegation, bukan .on('click') langsung pada tombol.
Bisakah accordion dibuka otomatis saat halaman dimuat?
Bisa. Panggil $('.acc-trigger').first().trigger('click') setelah DOM siap. Jika tidak ingin ada animasi saat pertama kali tampil, pakai $('.acc-panel').first().show() lalu perbarui aria-expanded pada tombolnya secara manual.
Apakah perlu plugin accordion kalau kebutuhannya sederhana?
Tidak. Selama yang kamu butuhkan hanya buka-tutup panel dengan animasi slide, skrip di atas sudah cukup dan lebih mudah dirawat. Plugin baru masuk akal ketika kamu butuh fitur seperti deep linking lewat hash URL, mode multi-kolom, atau animasi yang sangat khusus.
