Trình tạo accordion CSS

Mã được tạo

Mỗi phần dùng phần tử đóng mở gốc của trình duyệt:

<details class="generated-accordion" open>
  <summary>Có những nội dung gì?</summary>
  <div class="generated-accordion__panel">Thêm thông tin chi tiết tại đây.</div>
</details>

CSS được tạo định dạng đường viền, nền tiêu đề, chữ, focus, khoảng cách, góc và biểu tượng. Mã dùng thuộc tính logical như margin-inline-start và có quy tắc cho bố cục từ phải sang trái. Media query prefers-reduced-motion bỏ hiệu ứng chuyển biểu tượng khi khách truy cập chọn giảm chuyển động.

Mở nhiều bảng hoặc một bảng

Trên trình duyệt cũ chưa hỗ trợ nhóm details độc quyền, accordion vẫn dùng được nhưng có thể để nhiều bảng cùng mở.

Văn bản thuần an toàn

Tiêu đề và bảng được xử lý như văn bản. Các ký tự <, >, &, dấu ngoặc kép và dấu nháy đơn được escape trong mã, nên thẻ được dán vào chỉ hiển thị như chữ. Nếu cần liên kết hoặc danh sách, hãy thêm markup đã kiểm tra sau khi xuất.

Kiểm tra khả năng tiếp cận trước khi đăng

• Dùng Tab đến từng summary rồi thử Enter và Space.
• Kiểm tra độ tương phản của màu focus trên nền tiêu đề và nền trang.
• Thử thu phóng, màn hình hẹp và trang từ phải sang trái.
• Không đặt hướng dẫn chính của trang chỉ trong một bảng đang đóng.