Trong giao diện web hiện đại, việc quản lý nhiều khối nội dung dài đôi khi khiến trang trở nên rối mắt. Accordion là giải pháp gọn gàng giúp gom nội dung vào từng mục, người dùng chỉ mở phần họ quan tâm. Nhờ hệ thống class và plugin Collapse có sẵn, Bootstrap giúp bạn tạo accordion dễ dàng, đồng bộ giao diện và linh hoạt tùy chỉnh.
Đọc bài viết này để hiểu ngay:
- Accordion trong Bootstrap là gì và hoạt động ra sao
- Các biến thể phổ biến: Default, Flush, Always open
- Những class và thuộc tính quan trọng khi làm việc với accordion
- Cách tùy chỉnh định dạng và điều khiển bằng JavaScript
- Các lưu ý kèm bài tập luyện tập để tự tin áp dụng trong dự án
Giới thiệu về Accordion trong Bootstrap
Accordion là gì?
Accordion là một thành phần giao diện cho phép gom nhiều khối nội dung vào chung một nhóm và hiển thị theo cơ chế thu gọn hoặc mở rộng.
Mỗi mục accordion thường bao gồm hai phần:
- Tiêu đề: đóng vai trò như một nút bấm
- Nội dung: được ẩn đi cho đến khi người dùng tương tác.
Cách bố trí này giúp tiết kiệm không gian hiển thị, đồng thời tạo sự tập trung vào đúng phần thông tin mà người dùng quan tâm.
Ví dụ, trong trường hợp bạn muốn trình bày ba đoạn văn bản dài trên cùng một trang. Nếu viết liên tục, trang sẽ trở nên rối mắt và người đọc phải cuộn nhiều lần. Khi áp dụng accordion, chỉ tiêu đề của từng đoạn hiện ra, nội dung sẽ mở ra khi bấm vào.
Hình ảnh minh họa về accordion
Tại sao nên dùng Accordion của Bootstrap?
Về nguyên tắc, một accordion có thể được xây dựng hoàn toàn thủ công bằng HTML, CSS và JavaScript. Lập trình viên chỉ cần viết cấu trúc phần tử, định nghĩa hiệu ứng chuyển tiếp và bổ sung đoạn script để xử lý sự kiện. Tuy nhiên, cách này thường tốn nhiều thời gian, khó bảo trì và dễ gây ra sự thiếu nhất quán trong giao diện nếu áp dụng cho một dự án lớn.
Ví dụ để tạo giao diện như thế này:
Cách tạo accordion thủ công:
<div class="accordion">
<div class="accordion-item">
<button class="accordion-header" aria-expanded="false">
Accordion Item #1
</button>
<div class="accordion-panel">
<p>Đây là nội dung chi tiết của mục số 1. Nó chỉ hiển thị khi mục được mở ra.</p>
</div>
</div>
<div class="accordion-item">
<button class="accordion-header" aria-expanded="false">
Accordion Item #2
</button>
<div class="accordion-panel">
<p>Đây là nội dung chi tiết của mục số 2. Người đọc có thể mở hoặc đóng tùy ý.</p>
</div>
</div>
<div class="accordion-item">
<button class="accordion-header" aria-expanded="false">
Accordion Item #3
</button>
<div class="accordion-panel">
<p>Đây là nội dung chi tiết của mục số 3. Accordion giúp tiết kiệm diện tích trang.</p>
</div>
</div>
</div>
<style>
.accordion {
border: 1px solid #ddd;
border-radius: 6px;
max-width: 500px;
margin: 1rem auto;
background: #fff;
font-family: sans-serif;
}
.accordion-item + .accordion-item {
border-top: 1px solid #ddd;
}
.accordion-header {
width: 100%;
padding: 1rem;
text-align: left;
background: #f8f9fa;
border: none;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
position: relative;
transition: background 0.2s ease;
}
.accordion-header:hover {
background: #e9ecef;
}
.accordion-header::after {
content: "▸";
position: absolute;
right: 1rem;
transition: transform 0.3s ease;
}
.accordion-item.open .accordion-header::after {
transform: rotate(90deg);
}
.accordion-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
padding: 0 1rem;
background: #fff;
}
.accordion-item.open .accordion-panel {
max-height: 200px;
padding: 1rem;
}
</style>
<script>
document.querySelectorAll('.accordion-header').forEach(btn => {
btn.addEventListener('click', () => {
const item = btn.parentElement;
const expanded = btn.getAttribute('aria-expanded') === 'true';
btn.setAttribute('aria-expanded', !expanded);
item.classList.toggle('open');
});
});
</script>Trong Bootstrap, toàn bộ cấu trúc, class, hiệu ứng và hành vi của accordion đã được định nghĩa sẵn. Lập trình viên chỉ cần sử dụng các class như .accordion, .accordion-item, .accordion-button, .accordion-collapse cùng với data-bs-toggle và data-bs-target là có ngay một accordion hoàn chỉnh.
Điều này vừa rút ngắn thời gian triển khai, vừa bảo đảm tính đồng bộ về mặt thiết kế, vì accordion sẽ tuân theo hệ thống màu sắc, font chữ và spacing chung của Bootstrap.
Cách tạo accordion cho ví dụ trên bằng Bootstrap:
<div class="accordion" id="accordionExample">
<!-- Item 1 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseOne"
aria-expanded="false"
aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse"
aria-labelledby="headingOne"
data-bs-parent="#accordionExample">
<div class="accordion-body">
Đây là nội dung chi tiết của mục số 1. Nó chỉ hiển thị khi mục được mở ra.
</div>
</div>
</div>
<!-- Item 2 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse"
aria-labelledby="headingTwo"
data-bs-parent="#accordionExample">
<div class="accordion-body">
Đây là nội dung chi tiết của mục số 2. Người đọc có thể mở hoặc đóng tùy ý.
</div>
</div>
</div>
<!-- Item 3 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseThree"
aria-expanded="false"
aria-controls="collapseThree">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse"
aria-labelledby="headingThree"
data-bs-parent="#accordionExample">
<div class="accordion-body">
Đây là nội dung chi tiết của mục số 3. Accordion giúp tiết kiệm diện tích trang.
</div>
</div>
</div>
</div>Từ minh họa trên ta có thể thấy rằng, việc dùng Accordion của Bootstrap giúp:
- Tiết kiệm thời gian triển khai
- Đảm bảo sự đồng bộ giao diện
- Hỗ trợ sẵn các yếu tố về hiệu ứng cũng như khả năng truy cập
Cấu trúc cơ bản và cách hoạt động của Accordion
Thành phần chính trong Accordion
Một accordion trong Bootstrap thực chất là sự kết hợp giữa nhiều khối HTML, được tổ chức chặt chẽ để đảm bảo tính logic và khả năng tương tác. Thành phần cơ bản bao gồm:
- .accordion: phần khung chứa ngoài cùng, đóng vai trò như một “container” cho toàn bộ accordion. Bên trong nó, bạn có thể đặt một hoặc nhiều .accordion-item
- .accordion-item: là từng mục (item) riêng lẻ trong accordion. Mỗi item thường bao gồm phần tiêu đề và phần nội dung có thể thu gọn/mở rộng
- .accordion-header và .accordion-button: nằm ở phần trên cùng của mỗi item, đây chính là nút mà người dùng sẽ click để mở hoặc đóng phần nội dung bên dưới. Bootstrap gắn hiệu ứng và icon mũi tên mặc định thông qua .accordion-button
- .accordion-collapse kết hợp với .collapse: chính là phần nội dung có thể thu gọn hoặc mở rộng. Đây là nơi diễn ra hiệu ứng trượt khi người dùng thao tác
- .accordion-body: phần tử con bên trong .accordion-collapse, là nơi bạn đặt nội dung thực tế, ví dụ như văn bản, danh sách, hình ảnh hoặc bất kỳ thành phần HTML nào khác.
Ví dụ:
<div class="accordion" id="demoAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">
Mục 1: Giới thiệu
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show"
aria-labelledby="headingOne" data-bs-parent="#demoAccordion">
<div class="accordion-body">
Đây là nội dung bên trong Mục 1. Bạn có thể đặt đoạn văn, hình ảnh hoặc bất kỳ nội dung nào khác.
</div>
</div>
</div>
</div>
Trong ví dụ này:
- Khi người dùng nhấn vào nút “Mục 1: Giới thiệu”, Bootstrap sẽ dựa vào thuộc tính data-bs-target để xác định panel cần mở.
- Class .show ban đầu được thêm vào để chỉ định rằng panel này mặc định đang mở khi trang tải lần đầu.
Kết quả hiển quả:
Lúc đóng nội dung:
Lúc mở nội dung:
Cơ chế hoạt động của Accordion Bootstrap
Accordion trong Bootstrap vận hành dựa trên plugin Collapse. Khi bạn nhấn vào một nút .accordion-button, Bootstrap sẽ kiểm tra panel liên kết qua data-bs-target hoặc aria-controls. Sau đó, nó đơn giản là thêm hoặc gỡ class .show ở phần .accordion-collapse.
- Nếu có .show: panel mở, hiển thị nội dung kèm hiệu ứng trượt xuống
- Nếu bỏ .show: panel đóng, nội dung thu gọn lại
Thuộc tính data-bs-parent giúp kiểm soát hành vi:
- Có data-bs-parent: mở mục mới sẽ tự động đóng mục đang mở
- Không có data-bs-parent: bạn có thể mở nhiều mục cùng lúc
Nhờ cơ chế này, accordion trở nên trực quan và dễ dùng mà không cần viết thêm JavaScript thủ công.
Các biến thể Accordion trong Bootstrap
Một trong những ưu điểm lớn của Bootstrap là ngoài phiên bản Accordion mặc định, bạn còn có thể tùy chọn một số biến thể để phù hợp với từng ngữ cảnh thiết kế. Dưới đây là ba biến thể phổ biến nhất mà Bootstrap hỗ trợ.
Accordion mặc định
Đây là dạng cơ bản và cũng được dùng nhiều nhất. Mỗi mục trong accordion sẽ có tiêu đề (header) kèm nút .accordion-button, khi nhấn vào sẽ mở phần nội dung bên dưới.
Ví dụ:
<div class="accordion" id="accordionDefault">
<!-- Item 1 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">
Tiêu đề #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show"
aria-labelledby="headingOne" data-bs-parent="#accordionDefault">
<div class="accordion-body">
Nội dung mục 1.
</div>
</div>
</div>
<!-- Item 2 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo">
Tiêu đề #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse"
aria-labelledby="headingTwo" data-bs-parent="#accordionDefault">
<div class="accordion-body">
Nội dung mục 2.
</div>
</div>
</div>
</div>Kết quả:
Accordion Flush
Ngoài phiên bản mặc định với border và background rõ ràng, Bootstrap còn hỗ trợ biến thể Accordion Flush. Điểm khác biệt chính là accordion flush loại bỏ border ngoài cùng và background mặc định, tạo cảm giác “phẳng” và liền mạch hơn.
Cú pháp: thêm class .accordion-flush vào container accordion.
<div class="accordion accordion-flush" id="accordionFlushExample">
...
</div>Ví dụ:
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseOne"
aria-expanded="false" aria-controls="flush-collapseOne">
Câu hỏi thường gặp #1
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse"
aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
Đây là phần nội dung trả lời cho câu hỏi số 1. Accordion flush loại bỏ border ngoài nên phần này nhìn sẽ phẳng hơn so với mặc định.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo"
aria-expanded="false" aria-controls="flush-collapseTwo">
Câu hỏi thường gặp #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse"
aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
Đây là nội dung cho câu hỏi số 2.
</div>
</div>
</div>
</div>Kết quả:
Kiểu này rất hữu ích khi bạn muốn tích hợp accordion vào bên trong một khu vực khác (ví dụ: sidebar, danh sách filter, menu điều hướng) mà không muốn accordion trông “cồng kềnh” với quá nhiều đường viền.
Accordion Always Open
Theo mặc định, Bootstrap sẽ chỉ cho phép một item mở cùng lúc trong một accordion. Khi mở mục mới, mục cũ sẽ tự động đóng lại. Điều này được điều khiển nhờ thuộc tính data-bs-parent.
Tuy nhiên, có những tình huống bạn muốn cho phép người dùng mở nhiều mục cùng lúc (multi-expand). Ví dụ: một danh mục filter trong e-commerce nơi người dùng có thể đồng thời mở “Kích thước”, “Màu sắc”, “Giá”.
Để đạt được điều này, bạn chỉ cần bỏ thuộc tính data-bs-parent ra khỏi các accordion-collapse.
Ví dụ:
<div class="accordion" id="accordionAlwaysOpen">
<div class="accordion-item">
<h2 class="accordion-header" id="always-headingOne">
<button class="accordion-button" type="button"
data-bs-toggle="collapse" data-bs-target="#always-collapseOne"
aria-expanded="true" aria-controls="always-collapseOne">
Bộ lọc: Kích thước
</button>
</h2>
<div id="always-collapseOne" class="accordion-collapse collapse show"
aria-labelledby="always-headingOne">
<div class="accordion-body">
Nội dung bộ lọc kích thước.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="always-headingTwo">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#always-collapseTwo"
aria-expanded="false" aria-controls="always-collapseTwo">
Bộ lọc: Màu sắc
</button>
</h2>
<div id="always-collapseTwo" class="accordion-collapse collapse"
aria-labelledby="always-headingTwo">
<div class="accordion-body">
Nội dung bộ lọc màu sắc.
</div>
</div>
</div>
</div>Kết quả: cả hai panel có thể mở cùng lúc mà không đóng lẫn nhau.
Các nhóm thuộc tính và class chính trong Accordion
Class điều khiển trạng thái
Trong Accordion, Bootstrap sử dụng một số class quan trọng để quyết định trạng thái mở/đóng của panel và nút toggle. Khi người dùng nhấn, Bootstrap sẽ tự động thêm/bớt các class này để hiển thị đúng trạng thái.
| Class | Vai trò | Trường hợp sử dụng |
.accordion-button | Class gốc cho nút toggle (luôn có) | Nút mở/đóng panel |
.accordion-button.collapsed | Gắn vào khi panel đang đóng | Xuất hiện khi panel đang đóng. Caret quay ngang sang phải. |
.accordion-collapse.collapse | Container của panel nội dung bị ẩn | Nội dung ẩn theo mặc định |
.accordion-collapse.collapse.show | Container của panel nội dung được hiển thị | Hiển thị đầy đủ nội dung |
Quản lý icon và trạng thái nút
Trong Accordion, việc hiển thị icon và cập nhật trạng thái nút khi mở/đóng panel được điều khiển hoàn toàn bằng class CSS kết hợp với thuộc tính aria. Bootstrap sử dụng pseudo-element ::after để tạo ra icon mặc định (caret mũi tên), và dựa vào các class .collapsed hoặc .show để thay đổi trạng thái.
Bạn có thể ghi đè CSS để thay thế caret mặc định bằng ký hiệu khác (ví dụ “+ / –”):
.accordion-button::after {
background-image: none;
content: '+';
}
.accordion-button:not(.collapsed)::after {
background-image: none;
content: '–';
}Kết quả:
Accessibility trong Accordion
Accordion là một thành phần tương tác (interactive component), vì vậy Bootstrap đã tích hợp sẵn nhiều thuộc tính aria để đảm bảo người dùng có thể thao tác dễ dàng kể cả với screen reader hoặc bàn phím.
Các thuộc tính aria quan trọng
| Thuộc tính | Áp dụng cho | Giá trị điển hình | Ý nghĩa |
| aria-expanded | .accordion-button | true / false | Xác định trạng thái panel: mở (true) hoặc đóng (false). Giá trị được Bootstrap cập nhật tự động khi người dùng nhấn nút. |
| aria-controls | .accordion-button | id của panel | Liên kết nút điều khiển với phần nội dung .accordion-collapse mà nó quản lý. |
| aria-labelledby | .accordion-collapse | id của header | Liên kết nội dung panel với tiêu đề (header) chứa nút toggle, giúp screen reader hiểu quan hệ mô tả. |
| role=“button” | Thẻ <button> hoặc phần tử thay thế | button | Xác định phần tử là một nút bấm. Nếu không dùng <button> thật sự (ví dụ <a>), cần thêm role=“button” để screen reader hiểu đúng. |
| tabindex | <a> hoặc <div> (nếu không dùng <button>) | 0,1,2,.. | Cho phép phần tử focus bằng bàn phím. |
Lưu ý, khi dùng đúng cú pháp Bootstrap (<button class=“accordion-button”>), hầu hết các thuộc tính aria được thêm và quản lý tự động.
Tùy chỉnh định dạng của Accordion Bootstrap
Bootstrap cung cấp sẵn nhiều class tiện ích (utility classes) và CSS variables để bạn điều chỉnh giao diện của Accordion mà không cần viết nhiều CSS thủ công. Việc này giúp dễ dàng thay đổi màu sắc, viền, bo góc hoặc khoảng cách theo ngữ cảnh thiết kế.
Có 2 cách để bạn tùy chỉnh định dạng cho accordion:
Dùng class tiện ích của Bootstrap
Bootstrap có sẵn nhiều class để bạn có thể thay đổi định dạng của màu sắc, viền, bo góc, khoảng cách,… mà không cần viết CSS. Ví dụ một số class thường dùng:
- .accordion-flush: loại bỏ viền và bo góc ngoài, cho cảm giác “phẳng”, sát mép container
- .border, .border-0, .rounded, .rounded-0: bật/tắt viền, thay đổi bo góc cho toàn accordion hoặc từng item
- .bg-*, .text-*: đổi màu nền và màu chữ cho header hoặc nút toggle (ví dụ .bg-primary .text-white). Đọc thêm về Bootstrap color
- .shadow-sm, .shadow, .shadow-lg: thêm bóng đổ, giúp accordion nổi bật trên nền
- p-*, px-*, py-*, mb-*: tuỳ chỉnh padding/margin nhanh chóng (đọc thêm về cách sử dụng Padding Bootstrap)
Ví dụ:
<div class="accordion shadow-sm border rounded" id="accUtil">
<div class="accordion-item">
<h2 class="accordion-header" id="uHead">
<button class="accordion-button bg-primary text-white" type="button"
data-bs-toggle="collapse" data-bs-target="#uBody"
aria-expanded="true" aria-controls="uBody">
Accordion với class tiện ích
</button>
</h2>
<div id="uBody" class="accordion-collapse collapse show" aria-labelledby="uHead">
<div class="accordion-body">
Accordion này sử dụng border, rounded, shadow và màu nền xanh cho nút.
</div>
</div>
</div>
</div>Kết quả:
Dùng CSS tùy chỉnh
Bạn có thể viết các class CSS riêng và ghi đè lên style mà Bootstrap định nghĩa sẵn. Ví dụ, đổi màu nền, màu chữ và bo góc của header accordion:
<style>
.custom-accordion .accordion-button {
background-color: #4a148c;
color: #fff;
border-radius: 12px;
}
.custom-accordion .accordion-button:not(.collapsed) {
background-color: #6a1b9a;
color: #fff;
}
</style>Và sử dụng trong accordion:
<div class="accordion custom-accordion" id="accordionCustom">
<div class="accordion-item">
<h2 class="accordion-header" id="headingCustom">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseCustom"
aria-expanded="false" aria-controls="collapseCustom">
Accordion tuỳ chỉnh
</button>
</h2>
<div id="collapseCustom" class="accordion-collapse collapse"
aria-labelledby="headingCustom" data-bs-parent="#accordionCustom">
<div class="accordion-body">
Đây là accordion có màu nền tím đậm và chữ trắng, do tuỳ chỉnh bằng CSS.
</div>
</div>
</div>
</div>Kết quả:
Nếu bạn đang sử dụng Bootstrap thông qua bản source Sass, việc tuỳ chỉnh sẽ linh hoạt hơn. Bạn có thể ghi đè biến Sass của accordion để thay đổi giao diện ngay từ lúc build. Ví dụ: chỉnh lại padding, màu active và màu icon của accordion:
// Custom Bootstrap
@import "bootstrap/functions";
@import "bootstrap/variables"; // Biến gốc
@import "bootstrap/mixins";
// Ghi đè biến ở đây
$accordion-button-padding-y: 1rem;
$accordion-button-padding-x: 2rem;
$accordion-button-color: #fff;
$accordion-button-bg: #4a148c;
$accordion-button-active-bg: #6a1b9a;
$accordion-icon-color: #fff;
$accordion-icon-active-color: #ffeb3b;
// Build lại Bootstrap
@import "bootstrap";
Khi biên dịch lại, toàn bộ accordion trong dự án sẽ có padding rộng hơn, nền tím, chữ trắng, và icon khi mở sẽ chuyển sang màu vàng.
Làm việc với Accordion bằng JavaScript
Mặc đinh, Accordion của Bootstrap hoạt động dựa trên collapse plugin. Chúng ta có thể dùng data attributes để thao tác mà không cần dùng đến code Javascript. Tuy nhiên, trong một số trường hợp mà bạn cần kiểm soát sâu hơn đối với accordion, bạn có thể sử dụng javascript api để thao tác.
- Đầu tiên, để thao tác với accordion bằng js, bạn cần khởi tạo 1 instance của nó:
<script>
const myEl = document.getElementById('collapseId');
const myCollapse = new bootstrap.Collapse(myEl, { toggle: false });
</script>Trong đó, “collapseId” là id của accordion cần thao tác.
- Sau đó, bạn có thể gọi các method để tương tác với accordion thông qua instance như:
| Method | Tác dụng |
| .show() | Mở panel |
| .hide() | Đóng panel |
| .toggle() | Chuyển trạng thái (đóng/mở) |
| .dispose() | Xoá data gắn trên DOM |
| getInstance(el) | Lấy instance đã tồn tại |
| getOrCreateInstance(el) | Lấy instance nếu có, nếu chưa sẽ khởi tạo mới |
Ví dụ, thao tác để accordion mở panel nội dung:
const myEl = document.getElementById('collapseOne');
const myCollapse = new bootstrap.Collapse(myEl, { toggle: false });
myCollapse.show();Một số lưu ý khi sử dụng Accordion Bootstrap
Accordion là một thành phần tiện lợi, giúp tối ưu không gian và tổ chức nội dung khoa học. Tuy nhiên, nếu triển khai không đúng cách, nó có thể gây rối mắt hoặc làm giảm trải nghiệm người dùng.
Dưới đây là một số điểm quan trọng mà anh em dev nên lưu ý khi làm việc với Accordion trong Bootstrap:
- Không nhồi nhét quá nhiều nội dung: Accordion phù hợp để ẩn/hiện thông tin theo nhóm nhưng nếu đặt nội dung quá dài hoặc quá nhiều tầng lồng nhau, người dùng sẽ khó theo dõi và trải nghiệm kém
- Đảm bảo tính nhất quán giao diện: Mỗi accordion nên có cấu trúc rõ ràng: tiêu đề → nút mở/đóng → nội dung. Tránh tự ý thay đổi quá nhiều khiến người dùng khó nhận diện
- Quan tâm đến accessibility: Đảm bảo các thuộc tính aria (aria-expanded, aria-controls, aria-labelledby) được dùng đúng. Điều này giúp người dùng sử dụng screen reader hoặc bàn phím vẫn điều hướng được
- Kiểm soát số lượng accordion trên trang: Nếu trên một trang có quá nhiều accordion, người dùng sẽ bị phân tán. Hãy cân nhắc nhóm nội dung hoặc thay bằng tab/nav nếu phù hợp hơn
Bài tập luyện tập sử dụng Accordion (3 cấp độ)
Để hiểu sâu hơn về cách hoạt động của Accordion trong Bootstrap, bạn có thể thử tự tay xây dựng các accordion trong Bootstrap theo ba cấp độ dưới đây.
Bài tập 1
Tạo một accordion có 3 mục. Khi load trang, mục đầu tiên mở sẵn, các mục khác đóng.
Lời giải Bài tập 1
Xây dựng accordion với cấu trúc nguyên bản với class .show để mở mặc định mục 1.
<div class="accordion" id="accordionBasic">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#basicOne" aria-expanded="true" aria-controls="basicOne">
Mục 1
</button>
</h2>
<div id="basicOne" class="accordion-collapse collapse show" data-bs-parent="#accordionBasic">
<div class="accordion-body">
Đây là nội dung của mục 1.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#basicTwo" aria-expanded="false" aria-controls="basicTwo">
Mục 2
</button>
</h2>
<div id="basicTwo" class="accordion-collapse collapse" data-bs-parent="#accordionBasic">
<div class="accordion-body">
Đây là nội dung của mục 2.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#basicThree" aria-expanded="false" aria-controls="basicThree">
Mục 3
</button>
</h2>
<div id="basicThree" class="accordion-collapse collapse" data-bs-parent="#accordionBasic">
<div class="accordion-body">
Đây là nội dung của mục 3.
</div>
</div>
</div>
</div>Bài tập 2
Sử dụng accordion ở bài tập 1 với icon +/– thay cho caret mặc định, đồng thời đổi màu nền header khi mở.
Lời giải Bài tập 2
Sử dụng code tạo accordion ở bài tập 1, kết hợp với CSS tùy chỉnh:
<style>
.accordion-button::after {
background-image: none;
content: '+';
font-weight: bold;
}
.accordion-button:not(.collapsed)::after {
background-image: none;
content: '–';
font-weight: bold;
margin-right: 10px;
}
.accordion-button:not(.collapsed) {
background-color: #e3f2fd;
color: #0d47a1;
}
</style>Bài tập 3
Tạo một accordion mà nhiều mục có thể mở cùng lúc (không auto đóng khi mở mục khác). Thêm JavaScript để có nút “Mở tất cả / Đóng tất cả”.
Khi đóng:
Khi mở:
Lời giải Bài tập 3
Khởi tạo Accordion với biến thể Accordion Always Open, và sử dụng javascript để điều khiển đóng/mở dựa trên sự kiện click của button.
<div class="accordion" id="accordionAdvanced">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#advOne" aria-expanded="true" aria-controls="advOne">
Mục A
</button>
</h2>
<div id="advOne" class="accordion-collapse collapse show">
<div class="accordion-body">Nội dung A.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#advTwo" aria-expanded="false" aria-controls="advTwo">
Mục B
</button>
</h2>
<div id="advTwo" class="accordion-collapse collapse">
<div class="accordion-body">Nội dung B.</div>
</div>
</div>
</div>
<button id="toggleAll" class="btn btn-primary mt-3">Mở tất cả</button>
<script>
const toggleBtn = document.getElementById('toggleAll');
const allCollapse = document.querySelectorAll('#accordionAdvanced .accordion-collapse');
let allOpen = false;
toggleBtn.addEventListener('click', () => {
allOpen = !allOpen;
toggleBtn.textContent = allOpen ? 'Đóng tất cả' : 'Mở tất cả';
allCollapse.forEach(el => {
const collapseInstance = bootstrap.Collapse.getOrCreateInstance(el, { toggle: false });
allOpen ? collapseInstance.show() : collapseInstance.hide();
});
});
</script>Các câu hỏi phổ biến về Accordion bootstrap
Accordion có thể mở sẵn một mục khi load trang không?
Có. Bạn chỉ cần thêm class .show vào phần .accordion-collapse của mục muốn mở mặc định. Ví dụ, trong ba mục accordion, nếu bạn thêm .show cho mục đầu tiên thì khi tải trang, nội dung mục này sẽ hiển thị sẵn mà không cần người dùng click.
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne">
Mục mở sẵn
</button>
</h2>
<!-- Thêm class .show để mở mặc định -->
<div id="collapseOne" class="accordion-collapse collapse show"
aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
Đây là nội dung sẽ hiển thị ngay khi tải trang.
</div>
</div>
</div>
</div>Làm sao thay đổi icon mũi tên mặc định trong Accordion?
Bootstrap tạo icon mũi tên bằng pseudo-element ::after trong class .accordion-button. Nếu muốn thay đổi, bạn có thể ghi đè CSS:
<style>
.accordion-button::after {
background-image: none;
content: '+';
}
.accordion-button:not(.collapsed)::after {
background-image: none;
content: '–';
}
</style>Khi đó, dấu + sẽ hiển thị lúc đóng, và dấu – xuất hiện khi mục được mở. Bạn cũng có thể thay bằng icon từ thư viện như Font Awesome.
Accordion có thể dùng để làm sidebar menu không?
Bạn có thể kết hợp Accordion với biến thể Accordion Flush để loại bỏ viền ngoài, giúp hiển thị gọn gàng hơn trong sidebar. Đây là cách phổ biến để xây dựng menu nhiều cấp hoặc danh sách bộ lọc (filter) trong e-commerce. Tuy nhiên, hãy đảm bảo menu rõ ràng, không nhồi nhét quá nhiều tầng để tránh gây rối cho người dùng.
Tổng kết
Accordion Bootstrap là một thành phần giao diện gọn gàng nhưng rất mạnh mẽ, giúp bạn tổ chức và tối ưu không gian hiển thị nội dung. Với hệ thống class và plugin Collapse tích hợp sẵn, bạn có thể nhanh chóng xây dựng accordion từ cơ bản đến nâng cao mà không cần viết nhiều JavaScript.
Qua bài viết này, ITviec hi vọng đã mang đến cho bạn đọc những kiến thức hữu ích để hiểu rõ cách sử dụng Accordion trong Bootstrap và tự tin áp dụng vào các dự án thực tế của mình.
