Giới thiệu

Tag <details> là một tag HTML mới được giới thiệu trong HTML5. Nó được sử dụng để tạo ra một phần tử có thể được mở rộng hoặc thu gọn để hiển thị hoặc ẩn các nội dung bổ sung.

Cách sử dụng

Để sử dụng tag <details>, bạn cần bao bọc nội dung bổ sung trong thẻ <details> và sử dụng thẻ <summary> để tạo tiêu đề cho phần tử mở rộng.

Ví dụ:

<details>
  <summary>Click để xem thêm</summary>
  <p>Đây là nội dung bổ sung mà bạn muốn hiển thị khi người dùng nhấp vào tiêu đề.</p>
</details>

Khi trang web được tải, nội dung bổ sung sẽ được ẩn đi và chỉ hiển thị tiêu đề. Khi người dùng nhấp vào tiêu đề, nội dung bổ sung sẽ được mở rộng và hiển thị.

Ví dụ kèm giải thích

Dưới đây là một ví dụ cụ thể để giúp bạn hiểu rõ hơn về cách sử dụng tag <details>:

<details>
  <summary>Click để xem danh sách môn học</summary>
  <ul>
    <li>Toán học</li>
    <li>Lập trình</li>
    <li>Ngôn ngữ học</li>
  </ul>
</details>

Trong ví dụ này, khi trang web được tải, chỉ có tiêu đề "Click để xem danh sách môn học" được hiển thị. Khi người dùng nhấp vào tiêu đề, danh sách môn học sẽ được mở rộng và hiển thị.

Tag <details> cung cấp một cách tiện lợi để ẩn hoặc hiển thị các nội dung bổ sung mà không làm cho trang web trở nên quá phức tạp. Nó rất hữu ích khi bạn muốn cung cấp thông tin chi tiết cho người dùng mà không làm cho giao diện trở nên quá tải.