<details> và <summary> tạo ra một disclosure widget native — một section có thể mở rộng/thu gọn — với không một dòng JavaScript nào. Trình duyệt xử lý việc bật-tắt, hỗ trợ bàn phím và accessibility cho bạn.
Click to expand
This content is hidden until the user opens it.
<summary> là nhãn có thể click (con đầu tiên).<details open> <!-- bắt đầu ở trạng thái mở -->
<summary>FAQ item</summary>
<p>Answer...</p>
</details>
const d = document.querySelector("details");
d.open; // boolean: nó có đang mở không?
d.addEventListener("toggle", () => console.log(d.open)); // kích hoạt khi mở/đóng
summary { cursor: pointer; }
summary::marker { color: blue; } /* tam giác/mũi tên */
details[open] summary { font-weight: bold; } /* style khi mở */
Accordion FAQ, các section "xem thêm", sidebar thu gọn được, văn bản spoiler, các hàng table mở rộng được. Trước khi có element này, mọi accordion đều cần JavaScript cộng với việc nối dây ARIA cho accessibility — giờ chỉ là hai tag semantic.
<details>/<summary> cho bạn nội dung thu gọn được có accessibility, thân thiện với bàn phím mà không cần JS và không cần ARIA thủ công — một ví dụ hoàn hảo về việc tận dụng nền tảng.
Hãy nghĩ tới nó cho FAQ và các pattern "xem thêm" trước khi xây dựng một accordion tùy chỉnh.