Trang chủ
According
Save
Settings
Sign Up
Log In
Save
Settings
HTML
Copy
<div class="accordion"> <div class="accordion-item"> <div class="accordion-header">Câu hỏi 1: Accordion là gì?</div> <div class="accordion-content"> <p>Accordion là một thành phần UI cho phép ẩn/hiện nội dung khi người dùng nhấn vào tiêu đề.</p> </div> </div> <div class="accordion-item"> <div class="accordion-header">Câu hỏi 2: Dùng accordion khi nào?</div> <div class="accordion-content"> <p>Accordion thường dùng cho FAQ, phần hiển thị nội dung dạng nhóm, menu điều hướng v.v.</p> <p>Accordion thường dùng cho FAQ, phần hiển thị nội dung dạng nhóm, menu điều hướng v.v.</p> <p>Accordion thường dùng cho FAQ, phần hiển thị nội dung dạng nhóm, menu điều hướng v.v.</p> <p>Accordion thường dùng cho FAQ, phần hiển thị nội dung dạng nhóm, menu điều hướng v.v.</p> </div> </div> <div class="accordion-item"> <div class="accordion-header">Câu hỏi 3: Accordion có responsive không?</div> <div class="accordion-content"> <p>Có! Với CSS cơ bản và layout linh hoạt, accordion sẽ hiển thị tốt trên mọi kích thước màn hình.</p> </div> </div> </div>
CSS
Copy
body { font-family: Arial, sans-serif; padding: 20px; } .accordion { width: 100%; max-width: 600px; margin: auto; } .accordion-item { border-bottom: 1px solid #ccc; } .accordion-header { background-color: #f1f1f1; cursor: pointer; padding: 15px 20px; font-size: 18px; font-weight: bold; transition: background-color 0.3s ease; } .accordion-header:hover { background-color: #e0e0e0; } .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; padding: 0 20px; background: #fafafa; } .accordion-content.open { padding: 15px 20px; }
JS
Copy
const headers = document.querySelectorAll(".accordion-header"); headers.forEach(header => { header.addEventListener("click", () => { const content = header.nextElementSibling; // Đóng tất cả content khác document.querySelectorAll(".accordion-content").forEach(c => { if (c !== content) { c.style.maxHeight = null; c.classList.remove("open"); } }); // Toggle content hiện tại if (content.style.maxHeight) { content.style.maxHeight = null; content.classList.remove("open"); } else { content.style.maxHeight = content.scrollHeight + "px"; content.classList.add("open"); } }); });