HTML5 - thẻ Details

Thẻ details thường đi với thẻ summary trong layout rút gọn

Đóng và sổ nội dung

Ví dụ cơ bản nhất (click vào dấu +)

<code>

<details>
<summary>tiêu đề</summary>
Nội dung - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</details>

detail open và close

details[open] > summary {
    margin-bottom: 0.5rem;
}

Đổi dấu tam giác thành dấu "+" và dấu "-"

Trang thái mặc định nút sổ là dấu tam giác. Muốn chuyển thành dấu + như ví dụ trên, bạn sử dụng code dưới đây

details > summary {
    list-style-type: none;
}

details > summary::-webkit-details-marker {
    display: none;
}

details > summary::before {
    content: '+';
	margin-right: 1rem;
}

details[open] > summary::before {
    content: '-';
	margin-right: 1rem;
}