Thẻ `<details>` và `<summary>` hoạt động thế nào?

<details> tạo widget accordion/disclosure native không cần JS. <summary> là tiêu đề luôn hiển thị, click vào toggle nội dung bên trong. Thêm attribute open để mặc định mở. Trình duyệt tự thêm mũi tên toggle, style bằng details > summary { list-style: none } để xóa.

Ứng dụng thực tế: FAQ sections, spoiler tags, filter panels. Hữu ích khi muốn accordion đơn giản mà không import thư viện JS. CSS details[open] để style khi đang mở.

<details> creates a native accordion/disclosure widget without any JavaScript. <summary> is the always-visible title; clicking it toggles the content inside.

• Add the open attribute to expand by default.
• Browsers add a toggle arrow automatically; style it with details > summary { list-style: none } to remove it.
• Practical uses: FAQ sections, spoiler tags, filter panels.
• Useful when you want a simple accordion without importing a JS library.
• Use details[open] in CSS to style the expanded state.