Thẻ details và summary HTML: phần nội dung thu gọn

Nội dung thu gọn với details và summary

Bọc nội dung trong <details> và đặt <summary> lên đầu. Summary luôn hiển thị; mọi thứ khác bị ẩn cho tới khi người đọc nhấp vào nó:

<!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>

Nhấp vào câu hỏi để mở, nhấp lần nữa để đóng. Trình duyệt thêm dấu tam giác, cho summary nhận focus, bật tắt nó bằng Enter hoặc Space, và báo cho trình đọc màn hình biết nó đang mở hay đóng. Không có chút JavaScript nào.

Nếu bạn bỏ <summary>, trình duyệt sẽ hiện một nhãn mặc định ("Details" trong tiếng Anh).

Mở sẵn

Thuộc tính boolean open hiển thị nội dung ngay từ đầu. Trình duyệt thêm và xóa open khi người đọc bật tắt, nên đây cũng là chỗ để định dạng:

<!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>

Khung đang mở có viền xanh nhờ details[open]. Mở "Returns" thì nó cũng chuyển xanh; cả hai có thể mở cùng lúc.

Accordion: mỗi lần chỉ mở một mục

Cho nhiều phần tử <details> cùng một name và chúng trở thành một nhóm loại trừ: mở một mục sẽ đóng các mục khác. Việc này trước đây cần JavaScript, giờ chỉ cần thuộc tính trên các bản Chrome, Edge, Firefox và Safari hiện tại:

<!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>

Mở câu hỏi thứ hai thì câu đầu đóng lại. Xóa các thuộc tính name thì chúng lại mở độc lập với nhau. Accordion loại trừ ẩn đi nội dung mà người đọc có thể muốn so sánh, nên hãy dùng nó khi các mục là những phương án thay thế nhau, và dùng <details> thường khi người đọc có thể muốn mở nhiều mục.

Định dạng dấu mũi tên

Dấu tam giác là một list marker trên summary. list-style: none xóa nó (quy tắc ::-webkit-details-marker dành cho Safari), và một pseudo-element có thể vẽ dấu hiệu của riêng bạn:

<!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>

Dấu cộng xoay 45 độ thành dấu nhân khi mục được mở. Hãy giữ kiểu focus nhìn thấy được như viền :focus-visible ở đây: khi đã bỏ dấu mặc định, vòng focus là thứ người dùng bàn phím dựa vào.

Sự kiện toggle và thuộc tính open

JavaScript có thể đọc và đặt details.open, và sự kiện toggle được phát sau mỗi lần thay đổi, dù do cú nhấp, phím hay script gây ra:

<!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" đặt open cho cả hai, và nhật ký hiển thị sự kiện toggle gần nhất. Sự kiện này không nổi bọt (bubble), nên hãy lắng nghe trên từng phần tử <details> thay vì trên phần tử cha.

Nên đặt gì trong summary

Summary chứa chữ, phần tử inline, hoặc một tiêu đề khi tên của phần đó thuộc về dàn ý của trang:

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

Tránh đặt link, nút và trường form bên trong <summary>: summary vốn đã là một nút điều khiển, nên một nút điều khiển bên trong nó dễ bị bỏ sót hoặc bấm nhầm, và trình đọc màn hình đọc các nút lồng nhau rất kém. Hãy đặt nội dung tương tác trong phần thân của <details>.

Lỗi thường gặp

• Tự làm nút ẩn hiện bằng <div> và JavaScript. <details> đã xử lý sẵn cú nhấp, phím và trạng thái cho trình đọc màn hình. Khi thật sự cần nút ẩn hiện tùy chỉnh, hãy dùng nút với aria-expanded.
• Đặt <summary> ở vị trí khác ngoài vị trí đầu. Nó phải là phần tử con đầu tiên của <details>.
• Ẩn dấu mũi tên mà không có gì thay thế. Hãy cho người đọc một dấu hiệu rằng summary mở ra được, như dấu cộng ở trên.
• Dùng display để ẩn nội dung. Hãy bật tắt open; CSS ép nội dung hiện hay ẩn sẽ xung đột với trạng thái của trình duyệt.
• Nhóm loại trừ cho nội dung người đọc cần so sánh. Chỉ dùng name khi việc mỗi lần mở một mục là hợp lý.