details dan summary HTML: Bagian yang Bisa Dibuka Tutup

Konten buka tutup dengan details dan summary

Bungkus konten dengan <details> dan taruh <summary> di urutan pertama. Summary tetap terlihat; semua yang lain tersembunyi sampai pembaca mengkliknya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>details</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <details>
    <summary>What is included in the free plan?</summary>
    <p>Five projects, community support and all the beginner courses.</p>
  </details>
</body>
</html>

Klik pertanyaannya untuk membukanya, lalu klik lagi untuk menutupnya. Browser menambahkan penanda segitiga, membuat summary bisa difokus, membuka dan menutupnya dengan Enter atau Space, dan memberi tahu screen reader apakah bagian itu sedang terbuka atau tertutup. Tidak ada JavaScript yang terlibat.

Kalau kamu tidak menulis <summary>, browser menampilkan label default ("Details" dalam bahasa Inggris).

Terbuka secara default

Atribut boolean open menampilkan kontennya sejak awal. Browser menambahkan dan menghapus open saat pembaca membuka dan menutupnya, jadi atribut ini juga menjadi pegangan untuk styling:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>open</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    details { border: 2px solid #e5e7eb; border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
    details[open] { border-color: #2563eb; }
    summary { cursor: pointer; font-weight: 600; }
  </style>
</head>
<body>
  <details open>
    <summary>Shipping</summary>
    <p>Orders ship within two working days.</p>
  </details>
  <details>
    <summary>Returns</summary>
    <p>Return any item within 30 days.</p>
  </details>
</body>
</html>

Kotak yang terbuka punya border biru dari details[open]. Buka "Returns" dan kotak itu juga menjadi biru; keduanya bisa terbuka bersamaan.

Accordion: hanya satu yang terbuka

Beri beberapa elemen <details> name yang sama dan semuanya menjadi grup eksklusif: membuka satu akan menutup yang lain. Dulu hal ini butuh JavaScript, sekarang cukup dengan atribut itu saja di Chrome, Edge, Firefox, dan Safari versi saat ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Accordion</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .faq { max-width: 420px; border: 1px solid #e5e7eb; border-radius: 10px; }
    .faq details + details { border-top: 1px solid #e5e7eb; }
    .faq summary { padding: 12px 14px; cursor: pointer; font-weight: 600; }
    .faq p { margin: 0; padding: 0 14px 12px; color: #374151; }
  </style>
</head>
<body>
  <div class="faq">
    <details name="faq" open>
      <summary>Is it free?</summary>
      <p>Yes, the basics are free forever.</p>
    </details>
    <details name="faq">
      <summary>Do I need to install anything?</summary>
      <p>No, everything runs in the browser.</p>
    </details>
    <details name="faq">
      <summary>Can I cancel any time?</summary>
      <p>Yes, from your account settings.</p>
    </details>
  </div>
</body>
</html>

Buka pertanyaan kedua dan pertanyaan pertama tertutup. Hapus atribut name dan semuanya kembali terbuka secara terpisah. Accordion eksklusif menyembunyikan konten yang mungkin ingin dibandingkan pembaca, jadi pakai saat bagian-bagiannya adalah alternatif, dan pakai <details> biasa saat orang mungkin ingin membuka beberapa bagian.

Memberi gaya penanda

Segitiga itu adalah penanda list di summary. list-style: none menghapusnya (aturan ::-webkit-details-marker menangani Safari), dan pseudo-element bisa menggambar penanda sendiri:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom marker</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    details { max-width: 420px; background: #f9fafb; border-radius: 8px; margin-bottom: 8px; }
    summary {
      list-style: none; cursor: pointer;
      display: flex; justify-content: space-between; align-items: center;
      padding: 12px 14px; font-weight: 600;
    }
    summary::-webkit-details-marker { display: none; }
    summary::after {
      content: "+"; font-size: 20px; color: #2563eb;
      transition: transform 0.2s;
    }
    details[open] summary::after { transform: rotate(45deg); }
    summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; border-radius: 8px; }
    details p { margin: 0; padding: 0 14px 12px; }
  </style>
</head>
<body>
  <details>
    <summary>How long are the lessons?</summary>
    <p>Most lessons take five to ten minutes.</p>
  </details>
  <details>
    <summary>Do I get a certificate?</summary>
    <p>Yes, when you finish a course.</p>
  </details>
</body>
</html>

Tanda plus berputar 45 derajat menjadi silang saat bagiannya terbuka. Pertahankan gaya fokus yang terlihat seperti outline :focus-visible di sini: setelah kamu menghapus penanda default, cincin fokus itulah yang diandalkan pengguna keyboard.

Event toggle dan property open

JavaScript bisa membaca dan mengatur details.open, dan event toggle dipicu setelah setiap perubahan, entah disebabkan klik, tombol keyboard, atau script:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggle</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 4px 10px; margin-inline-end: 6px; }
    details { margin-top: 10px; border: 2px solid #e5e7eb; border-radius: 8px; padding: 8px 12px; }
    #log { color: #16a34a; }
  </style>
</head>
<body>
  <button id="expand">Expand all</button>
  <button id="collapse">Collapse all</button>
  <details><summary>Step 1</summary><p>Create an account.</p></details>
  <details><summary>Step 2</summary><p>Pick a course.</p></details>
  <p id="log">Nothing toggled yet.</p>
  <script>
    const all = document.querySelectorAll('details');
    all.forEach((d) => d.addEventListener('toggle', () => {
      document.getElementById('log').textContent =
        d.querySelector('summary').textContent + (d.open ? ' opened' : ' closed');
    }));
    document.getElementById('expand').onclick = () => all.forEach((d) => { d.open = true; });
    document.getElementById('collapse').onclick = () => all.forEach((d) => { d.open = false; });
  </script>
</body>
</html>

"Expand all" mengatur open di keduanya, dan log menampilkan event toggle terakhir. Event ini tidak bubble, jadi dengarkan di setiap elemen <details>, bukan di elemen induknya.

Apa yang ditaruh di summary

Summary berisi teks, elemen inline, atau heading saat judul bagian itu termasuk dalam kerangka halaman:

<details>
  <summary><h3>Refund policy</h3></summary>
  <p>...</p>
</details>

Hindari link, tombol, dan field form di dalam <summary>: summary sudah merupakan kontrol, jadi kontrol di dalamnya mudah terlewat atau tidak sengaja tertekan, dan screen reader mengumumkan kontrol bersarang dengan buruk. Taruh konten interaktif di badan <details>.

Kesalahan umum

• Membuat toggle dengan <div> dan JavaScript. <details> sudah menangani klik, tombol keyboard, dan status untuk screen reader. Saat kamu memang butuh toggle buatan sendiri, pakai button dengan aria-expanded.
• Menaruh <summary> di mana pun selain urutan pertama. Summary harus menjadi anak pertama <details>.
• Menyembunyikan penanda tanpa pengganti. Beri pembaca tanda bahwa summary bisa dibuka, seperti tanda plus di atas.
• Memakai display untuk menyembunyikan konten. Ubah open; CSS yang memaksa konten terlihat atau tersembunyi bertentangan dengan status browser.
• Grup eksklusif untuk konten yang dibandingkan orang. Pakai name hanya saat masuk akal membuka satu bagian dalam satu waktu.