htmlcssjavascriptkomponenPemula9 mnt baca

Accordion FAQ

Daftar pertanyaan yang jawabannya terbuka-tutup seperti di halaman bantuan.

Apa Itu Accordion?

Accordion adalah daftar item yang bisa dibuka-tutup satu per satu, seperti alat musik akordeon yang melipat. Pola ini sempurna untuk FAQ (Frequently Asked Questions): puluhan pertanyaan muat dalam ruang kecil, pengguna membuka yang menarik saja.

Langkah Membangun

HTML: Setiap item: <div class="item"> berisi <button class="tanya"> (pertanyaan + ikon +/−) dan <div class="jawab"> (jawaban).

CSS: Trik animasi mulusnya adalah max-height. Jawaban punya max-height: 0; overflow: hidden; transition: max-height 0.3s. Saat item punya class buka, max-height jadi nilai besar (misal 200px) sehingga konten "meluncur" terbuka. Kenapa tidak pakai height: auto? Karena CSS tidak bisa menganimasikan auto, jadi max-height adalah trik standarnya.

JS: Klik pertanyaan -> toggle class buka pada item. Bonus: mode "hanya satu terbuka" dengan menutup semua item lain dulu sebelum membuka yang diklik.

Kesalahan Umum

  • max-height terlalu kecil sehingga jawaban panjang terpotong (beri nilai longgar seperti 500px).
  • Ikon + tidak berubah menjadi − (putar ikon dengan transform saat item terbuka).
  • Seluruh area jawaban bisa diklik padahal seharusnya hanya pertanyaan (pasang listener pada tombol pertanyaan saja).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Pencarian FAQ

Tambahkan kotak pencarian di atas FAQ yang memfilter pertanyaan secara real-time: hanya item yang teksnya mengandung kata kunci yang tampil.