Dulu accordion adalah tiga ratus baris JavaScript demi pekerjaan dua tag. Beri atribut name yang sama pada sekumpulan <details> dan browser membuka satu serta menutup sisanya untuk Anda.

<details name="faq" open>
  <summary>What makes this an accordion?</summary>
  <p>The name attribute groups the panels; opening one closes the rest.</p>
</details>
<details name="faq">
  <summary>Works without JavaScript?</summary>
  <p>It never needed any.</p>
</details>

Apa yang dilakukan browser untuk Anda

  • Keyboard: Tab menjangkau setiap ringkasan, tombol Enter atau Spasi, tidak ada kode jebakan fokus yang membuat kesalahan.
  • Pembaca yang tidak menggunakan JavaScript mendapatkan pengalaman penuh, karena tidak ada yang dapat dipecahkan oleh skrip yang dinonaktifkan.
  • Mesin pencari membaca konten dengan cara apa pun: panelnya adalah DOM asli, bukan div tersembunyi yang menunggu hidrasi.

Tingkatkan akordeon lama

  1. Ganti skripnya dengan satu <details> per panel, semuanya memakai satu nilai name.
  2. Pindahkan teks tombol lama ke <summary>; ikon chevron tetap di CSS.
  3. Hapus handler klik dan atribut status ARIA; <summary> sudah jadi toggle.
  4. Uji keyboard saja: setiap ringkasan dapat dijangkau, hanya satu panel yang terbuka per grup.

Butuh animasi? Hiasi detail[buka] transisi dalam CSS dan biarkan browser mempertahankan statusnya. Hasil yang sangat keren: kode lebih sedikit dan akses lebih luas daripada akses lebih sedikit.