Coden ản hiện nội dung html

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

- 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:

- Để 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;
}

• 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