Tutorial HTML / Membuat konten buka-tutup dengan details dan summary

details dan summary membuat konten yang dapat dibuka dan ditutup oleh pengguna tanpa menulis JavaScript. Ini cocok untuk penjelasan opsional, panduan panjang, atau jawaban yang ingin ditampilkan pembaca jika diperlukan.

Membuat panel buka-tutup sederhana

<details>
  <summary>Tampilkan jam buka</summary>
  <p>Kami buka dari Senin sampai Jumat pukul 9:00 hingga 18:00.</p>
</details>

Masukkan kode ke dalam body dari dokumen HTML dan buka di peramban. Awalnya hanya muncul "Tampilkan jam buka". Aktifkan teks ini dengan mouse atau sentuhan atau keyboard untuk menampilkan paragraf; aktifkan lagi untuk menutupnya. Masukkan summary terlebih dahulu ke dalam details. Peramban menyediakan keadaan dasarnya yang bisa dibuka-tutup dan interaksi; Anda tidak memerlukan skrip, hanya untuk membuka dan menutup.

Penanda dan tepi dapat terlihat berbeda tergantung peramban atau gaya CSS. Yang penting adalah label tetap jelas, konten dapat dibuka dan ditutup, dan fokus keyboard tetap terlihat.

Tampilkan konten terlebih dahulu

Tambahkan atribut open jika panel ingin ditampilkan terbuka pada awalnya. Pengguna masih dapat menutupnya dan membukanya kembali. Aturan keberadaan boolean juga ditunjukkan dengan checked dalam sintaks HTML.

<details open>
  <summary>Informasi pengiriman</summary>
  <p>Waktu pengiriman bervariasi tergantung wilayah.</p>
</details>

open adalah atribut boolean. Menulis open="false" selalu membuat atribut ada dan membuka panel pada awalnya. Hapus atribut sepenuhnya untuk memulai dalam keadaan tertutup. Jangan sembunyikan kondisi yang harus dibaca semua orang seolah-olah itu hanya informasi tambahan opsional.

Pilih label yang berguna

Beberapa elemen details dapat muncul bersamaan, tetapi setiap summary harus mengidentifikasi konten apa yang ditampilkan. Mengulang "Informasi lebih lanjut" membuat elemen sulit dibedakan. Pertanyaan yang sering diajukan bisa mengikuti pola ini, tetapi jika jawabannya singkat dan langsung bermanfaat, teks yang terlihat secara normal bisa lebih cepat untuk pembaca.

Uji hasilnya menggunakan keyboard dan pada layar sempit. Referensi ke detail di MDN menjelaskan strukturnya dan atributnya.

Periksa penggunaan keyboard dan kondisi awal

1. Buka kembali file tersebut dan bandingkan contoh yang tertutup tanpa open dengan contoh yang terbuka dengan open.
2. Tekan tombol Tab untuk pergi ke elemen summary, dan periksa indikator fokusnya. Biarkan konten summary untuk contoh dasar ini tetap berupa teks sederhana, daripada menempatkan link atau tombol yang bersaing di dalamnya.
3. Gunakan tombol Enter dan Space secara terpisah, untuk membuka dan menutupnya. Jika Anda menambahkan CSS, ulangi pengujian untuk memastikan fokus tetap terlihat.

HTML menawarkan mekanisme buka-tutup bawaan, tetapi menambahkan interaksi tambahan dapat memperkenalkan perilaku fokus yang masih perlu diuji. Referensi ke summary di MDN menjelaskan kondisi penggunaannya.

Jika itu tidak berfungsi

Periksa bahwa summary berada di dalam details dan bahwa tag penutup ada. Jika Anda telah menata kontrol, pastikan area yang dapat diklik dan indikator fokus yang terlihat tidak dihapus. Panel yang dapat diperluas memaksa pengguna melakukan tindakan tambahan, oleh karena itu lebih baik menyimpannya untuk konten yang benar-benar opsional atau panjang, daripada hanya menggunakannya untuk efek visual. Perluas pemeriksaan fokus dan interaksi dengan halaman kecil di Dasar-dasar aksesibilitas: Judul, Tautan, Gambar, dan Keyboard.