Thẻ <details> & <summary> trong HTML

- Thẻ <details> và <summary> thường được sử dụng kết hợp với nhau để tạo phần tử có dạng:

"chỉ hiển thị tiêu đề còn chi tiết thì bị ẩn, khi bấm vào tiêu đề thì chi tiết mới được hiển thị"

- Ví dụ:

Loạt tài liệu hướng dẫn học Lập Trình Web của chúng tôi bao gồm:

Tài liệu học HTML
Tài liệu học CSS
Tài liệu học JavaScript
Tài liệu học MySQL
Tài liệu học PHP

- Để sử dụng thẻ <details> và <summary>, chúng ta dùng cú pháp như sau:

<details>
    <summary>Tiêu đề</summary>
    Phần nội dung chi tiết bị ẩn
</details>

Ví dụ:

<details>
    <summary>Loạt tài liệu hướng dẫn học Lập Trình Web gồm:</summary>
    <ul>
        <li>Tài liệu học HTML</li>
        <li>Tài liệu học CSS</li>
        <li>Tài liệu học JavaScript</li>
        <li>Tài liệu học MySQL</li>
        <li>Tài liệu học PHP</li>
    </ul>
</details>

Xem ví dụ

- Chúng ta cũng có thể thêm thuộc tính open vào thẻ <details> để thiết lập phần nội dung chi tiết mặc định được hiển thị.

Ví dụ:

<details open>
    <summary>Loạt tài liệu hướng dẫn học Lập Trình Web gồm:</summary>
    <ul>
        <li>Tài liệu học HTML</li>
        <li>Tài liệu học CSS</li>
        <li>Tài liệu học JavaScript</li>
        <li>Tài liệu học MySQL</li>
        <li>Tài liệu học PHP</li>
    </ul>
</details>

Xem ví dụ

- Hầu hết các trình duyệt sẽ hiển thị phần tử <details> & <summary> với định dạng CSS như sau:

details {
    display: block;
}

summary {
    display: block;
}