Pernah liat FAQ section di website? Pertanyaan-pertanyaan ditumpuk vertikal, klik salah satu — jawabannya muncul, klik lagi — kosong lagi. Dulu efek itu butuh JavaScript: event listener, toggle class, animate height. Sekarang? HTML punya <details> + <summary> native — collapsible content tanpa satu baris JS pun. Browser otomatis kasih panah ▶ yang muter pas dibuka, keyboard navigation, screen reader announce — semua gratis.

🤔 Underrated banget. Banyak developer masih reach for JavaScript modal/accordion library padahal <details> udah cukup. Lebih cepat, lebih accessible, kerja walau JS gagal load. Pakai dulu, kalau memang butuh fitur lebih kompleks baru naik level ke library.

Sintaks <details> & <summary>

<details>
  <summary>Klik untuk melihat jawaban</summary>
  <p>Ini adalah jawabannya!</p>
</details>

• <summary> adalah judul yang selalu terlihat dan bisa diklik
• Konten di dalam <details> (selain <summary>) tersembunyi secara default
• Tambahkan atribut open agar konten terbuka secara default

Default Terbuka dengan open

<details open>
  <summary>FAQ</summary>
  <p>Konten ini langsung terlihat.</p>
</details>

🎭 Analogi sehari-hari

<details> = laci yang bisa dibuka-tutup dengan label di depan (<summary>). Tarik label, isi keluar. Tutup, isi tersembunyi. Tanpa JavaScript — native HTML.

⚠️ Jebakan yang sering ditemui

• Tanpa <summary> = laci tanpa pegangan. Browser tampilkan default "Details" (jelek). Selalu kasih <summary>.
• CSS animation [open] tricky — height: auto tidak bisa di-transition. Workaround: interpolate-size: allow-keywords (modern), atau JS ukur tinggi.
• State tidak persist refresh — buka laci, refresh, ketutup lagi. Pakai localStorage kalau perlu inget.
• Screen reader announce buka/tutup otomatis — jangan tambah ARIA aria-expanded (redundant).
• <details> di dalam <summary> invalid — <summary> cuma boleh inline content + heading.
• Default arrow ▶ beda antar browser. Reset: summary::-webkit-details-marker { display: none } lalu pakai icon custom.

TL;DR: <details> + <summary> = collapsible content native, gak butuh JS. Browser kasih panah ▶ yang muter, keyboard navigation, screen reader announce — semua gratis. Cocok buat FAQ, accordion, settings panel. Tambah <details open> untuk default terbuka. State gak persist refresh — pakai localStorage kalau perlu inget. Animation height: auto susah — pakai interpolate-size: allow-keywords (modern). Sebelum reach for accordion library, coba <details> dulu.