Thẻ details

Thẻ details tạo ra một spoiler trong HTML, tức là được sử dụng cho thông tin có thể ẩn hoặc hiện theo ý muốn của người dùng.

Theo mặc định, nội dung của thẻ bị ẩn. Để hiển thị nó theo yêu cầu của người dùng, cần thêm thẻ summary, thẻ này chỉ định tiêu đề cho thẻ details. Tiêu đề này luôn hiển thị trên trang (ngay cả khi nội dung details ở trạng thái thu gọn) và có thể nhấp vào để mở rộng văn bản ẩn hoặc thu gọn lại.

Cũng có thể sử dụng thuộc tính open của thẻ details để hiển thị nội dung ẩn (ví dụ: để hiển thị nội dung của details bằng JavaScript).

Ví dụ

Hãy xem cách thẻ details hoạt động:

html<details>
  <summary>click me</summary>
  hidden text
</details>

Результат:

Xem thêm