Bagian tanya-jawab yang membentang saat pertanyaannya diklik, rincian pengiriman yang tersembunyi sampai diminta, dan daftar spesifikasi yang bisa dilipat memakai satu pola yang sama: sebuah kontrol yang membuka dan menutup konten pelengkap. Pola ini disebut disclosure, dan HTML menyediakannya tanpa satu baris JavaScript pun melalui pasangan elemen details dan summary. Pada chapter ini kita membedah cara kerja pasangan tersebut, atribut open, asal nama interaktifnya, styling ringkas, hingga satu contoh FAQ yang siap dipakai.

Pasangan details dan summary #

Elemen details adalah disclosure widget: satu wadah yang menampilkan label ringkas dan menyembunyikan sisanya sampai dibuka. Elemen summary lazim menjadi anak pertamanya dan berperan ganda, yaitu label yang terlihat sekaligus kontrol yang bisa ditekan. Sisa konten setelah summary berstatus tersembunyi secara default. Browser yang mengurus semuanya: satu klik pada label membuka widget, dan klik berikutnya menutupnya kembali.

html Widget disclosure paling sederhana 
<details>
  <summary>Jam operasional toko</summary>
  <p>Toko Budi buka setiap hari pukul 08.00 sampai 17.00.</p>
</details>

Output yang Dihasilkan:

text 
Kondisi tertutup (default):
  - Hanya segitiga kecil dan teks "Jam operasional toko" yang tampil
Kondisi terbuka (setelah label diklik):
  - Paragraf "Toko Budi buka setiap hari pukul 08.00 sampai 17.00." muncul di bawah label

Perilaku yang sama berlaku untuk keyboard. Elemen summary dapat menerima fokus, dan tombol Enter maupun Space membuka serta menutup widget tanpa satu baris skrip. Pembaca layar juga mengumumkan keadaannya, sehingga pengguna tahu widget sedang dibentangkan atau diciutkan.

Atribut open #

Elemen details lahir dalam keadaan tertutup, tetapi atribut boolean open membalik keadaan awalnya: kehadirannya membuat konten terbuka sejak halaman dimuat. Atribut ini cocok untuk satu item FAQ yang jawabannya memang layak tampil lebih dulu. Dari JavaScript, keadaan yang sama dicerminkan oleh properti open pada elemen, sehingga skrip bisa membaca atau mengubahnya. Setiap perubahan keadaan juga memicu event toggle pada elemen details.

html Widget yang terbuka sejak awal 
<details open>
  <summary>Apakah pesanan bisa dikirim ke luar kota?</summary>
  <p>Bisa, dengan ongkos tambahan sesuai jarak pengiriman.</p>
</details>

Nama interaktif dari summary #

Teks di dalam summary menjadi accessible name bagi widget: nama inilah yang dibacakan pembaca layar ketika fokus tiba, dan namanya pula yang tampil sebagai label. Karena itu tulis ringkasan yang mendeskripsikan isinya, bukan teks umum seperti “Baca lebih lanjut”. Bila details tidak memiliki anak summary — atau summary kosong — browser menampilkan label bawaan “Details” untuk menutupi kekosongan itu. Label bawaan tersebut sah secara teknis, tetapi tidak memberi pengunjung petunjuk apa pun tentang isinya.

html Tanpa summary: label bawaan browser muncul 
<details>
  <p>Paragraf ini tersembunyi sampai widget dibuka.</p>
</details>

Styling Widget: ::marker dan ::details-content #

Browser merender summary seperti item daftar, sehingga segitiga pembukanya berasal dari pseudo-element ::marker. Kita bisa mewarnai atau mengganti tanda tersebut lewat selector summary::marker. Untuk konten yang dibentangkan, CSS modern menyediakan pseudo-element ::details-content; dukungan browsernya masih terbatas, jadi periksa tabel dukungan sebelum mengandalkannya.

css Mewarnai segitiga disclosure 
summary::marker {
  color: #1a6b54;
}

Contoh: FAQ dengan Tiga details #

Kita rangkum materi di atas menjadi halaman FAQ katering Siti. Tiga pertanyaan ditulis sebagai tiga details, dan yang pertama terbuka sejak awal lewat atribut open.

html faq-details.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>FAQ Katering Siti</title>
  <style>
    body {
      font-family: sans-serif;
      max-width: 480px;
      margin: 24px auto;
      line-height: 1.6;
    }
    details {
      border: 1px solid #d1d5db;
      border-radius: 8px;
      padding: 8px 12px;
      margin-bottom: 8px;
    }
    summary {
      cursor: pointer;
      font-weight: bold;
    }
    summary::marker {
      color: #1a6b54;
    }
  </style>
</head>
<body>
  <h1>Pertanyaan yang Sering Diajukan</h1>

  <details open>
    <summary>Apakah pesanan bisa dikirim ke luar kota?</summary>
    <p>Bisa. Pengiriman ke luar kota dikenakan ongkos tambahan sesuai jarak.</p>
  </details>

  <details>
    <summary>Berapa lama waktu penyajiannya?</summary>
    <p>Pesanan makanan ringan siap dalam 30 menit, paket besar satu hari kerja.</p>
  </details>

  <details>
    <summary>Bagaimana cara membayar pesanan?</summary>
    <p>Pembayaran bisa melalui transfer bank atau tunai saat pesanan diambil.</p>
  </details>
</body>
</html>

Output yang Dihasilkan:

text 
Saat halaman baru dibuka:
  - Pertanyaan pertama tampil terbuka beserta jawabannya
  - Dua pertanyaan lain tampil tertutup; hanya labelnya yang terlihat
Setiap label ditekan:
  - Widget bersangkutan membuka atau menutup bagian jawabannya
  - Segitiga di sisi kiri label berwarna hijau karena aturan summary::marker

Mari kita bedah isi halaman itu:

  1. Elemen <details open>: pertanyaan pertama terbuka sejak awal karena atribut open tertulis di tag pembukanya.
  2. Elemen <summary>: label setiap widget sekaligus kontrol yang bisa ditekan; teksnya menjadi accessible name widget.
  3. Paragraf jawaban: konten setelah summary disembunyikan browser sampai widget dibuka.
  4. Aturan details pada CSS: border, sudut membulat, dan padding memberi wadah setiap pertanyaan bentuk kartu.
  5. Aturan summary dan summary::marker: cursor: pointer menandakan label bisa ditekan, sedangkan segitiganya berwarna hijau #1a6b54.

Satu keterbatasan patut dicatat: membuka satu details tidak menutup yang lain, sehingga seluruh pertanyaan bisa terbuka sekaligus. Pola accordion yang hanya mengizinkan satu panel terbuka memang membutuhkan JavaScript: kita mendengarkan event toggle pada setiap details, lalu menutup sisanya ketika satu panel terbuka. Untuk FAQ sederhana, perilaku bawaan ini justru wajar dan tanpa biaya.

Pasangan details dan summary menutup kebutuhan buka-tutup yang sederhana; kebutuhan jendela konfirmasi dan peringatan menuntut komponen yang lebih lengkap. Chapter berikutnya membahas elemen dialog yang dibangun khusus untuk peran itu.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

faq-details.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>FAQ Katering Siti</title>
  <style>
    body {
      font-family: sans-serif;
      max-width: 480px;
      margin: 24px auto;
      line-height: 1.6;
    }
    details {
      border: 1px solid #d1d5db;
      border-radius: 8px;
      padding: 8px 12px;
      margin-bottom: 8px;
    }
    summary {
      cursor: pointer;
      font-weight: bold;
    }
    summary::marker {
      color: #1a6b54;
    }
  </style>
</head>
<body>
  <h1>Pertanyaan yang Sering Diajukan</h1>

  <details open>
    <summary>Apakah pesanan bisa dikirim ke luar kota?</summary>
    <p>Bisa. Pengiriman ke luar kota dikenakan ongkos tambahan sesuai jarak.</p>
  </details>

  <details>
    <summary>Berapa lama waktu penyajiannya?</summary>
    <p>Pesanan makanan ringan siap dalam 30 menit, paket besar satu hari kerja.</p>
  </details>

  <details>
    <summary>Bagaimana cara membayar pesanan?</summary>
    <p>Pembayaran bisa melalui transfer bank atau tunai saat pesanan diambil.</p>
  </details>
</body>
</html>