<>📌 Accordion là một dạng UI component giúp hiển thị và ẩn nội dung theo cách có tổ chức. Nó thường được sử dụng để tối ưu không gian giao diện và giúp người dùng dễ dàng tìm kiếm thông tin mà không bị quá tải nội dung.
📌 Ứng dụng của Accordions:
✔ FAQ (Câu hỏi thường gặp) – Hiển thị danh sách các câu hỏi, chỉ mở nội dung khi cần.
✔ Danh mục sản phẩm – Mở rộng danh mục khi người dùng cần tìm kiếm sản phẩm.
✔ Thông tin chi tiết – Sử dụng trong bảng điều khiển (Dashboard) hoặc menu điều hướng.
/Cấu trúc của Accordion 📦
Một accordion thường có 3 phần chính:
1️⃣ Tiêu đề (Header) – Là phần hiển thị đầu tiên, khi click vào sẽ mở hoặc đóng nội dung.
2️⃣ Nội dung (Content Panel) – Là phần bị ẩn đi và chỉ hiển thị khi accordion mở.
3️⃣ Biểu tượng (Icon Indicator – tùy chọn) – Thường là dấu ➕ / ➖ hoặc ▶ / ▼ để thể hiện trạng thái mở/đóng.
/UX Best Practices cho Accordions 🎨
✅ Chỉ sử dụng accordion khi cần thiết
✔ Nếu nội dung ngắn, không cần accordion.
✔ Nếu người dùng cần xem nhiều nội dung cùng lúc, dùng tab hoặc danh sách thay thế.
✅ Cung cấp trạng thái trực quan rõ ràng
✔ Sử dụng dấu ➕ / ➖ hoặc ▶ / ▼ để giúp người dùng hiểu trạng thái mở/đóng.
✔ Khi mở accordion, nên tự động cuộn lên để hiển thị nội dung đầy đủ.
✅ Hỗ trợ bàn phím & Accessibility (A11Y)
✔ Người dùng nên có thể mở accordion bằng phím Enter hoặc Spacebar.
✔ Sử dụng aria-expanded="true/false" để hỗ trợ trình đọc màn hình.
