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

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

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

<details> là accordion có sẵn trong browser, không cần JS.

html

<details name="faq">                <!-- name: chỉ mở 1 cái tại một thời điểm -->
  <summary>Có hoàn tiền không?</summary>
  <p>Hoàn 100% trong 7 ngày đầu.</p>
</details>

<details open>                       <!-- mở sẵn -->
  <summary>Điều khoản</summary>
  <p>...</p>
</details>

css

details > summary { list-style: none; cursor: pointer; }  /* bỏ mũi tên mặc định */
details[open] > summary { font-weight: 600; }

Lợi thế so với accordion tự viết: có sẵn bàn phím (Enter/Space), đúng vai trò cho screen reader, và nội dung bên trong vẫn được Ctrl+F tìm thấy — browser tự bung ra.

detailsEl.addEventListener('toggle', () => console.log(detailsEl.open))

Lưu ý: đặt animation height cho phần nội dung sẽ không chạy vì browser toggle thẳng display.

Dùng ::details-content hoặc animate phần tử con thay vì chính <details>.

Xem toàn bộ HTML cùng filter theo level & chủ đề con.

Mở danh sách HTML

<details> là accordion có sẵn trong browser, không cần JS.

html

<details name="faq">                <!-- name: chỉ mở 1 cái tại một thời điểm -->
  <summary>Có hoàn tiền không?</summary>
  <p>Hoàn 100% trong 7 ngày đầu.</p>
</details>

<details open>                       <!-- mở sẵn -->
  <summary>Điều khoản</summary>
  <p>...</p>
</details>

css

details > summary { list-style: none; cursor: pointer; }  /* bỏ mũi tên mặc định */
details[open] > summary { font-weight: 600; }

detailsEl.addEventListener('toggle', () => console.log(detailsEl.open))

Lưu ý: đặt animation height cho phần nội dung sẽ không chạy vì browser toggle thẳng display.

Dùng ::details-content hoặc animate phần tử con thay vì chính <details>.