Accordion là một thành phần quan trọng trong Bootstrap 5, giúp bạn sắp xếp nội dung theo dạng gấp gọn. Khi người dùng nhấn vào tiêu đề của mỗi mục, nội dung bên dưới sẽ được mở ra hoặc đóng lại, giúp tiết kiệm không gian và làm cho trang trông gọn gàng hơn. Accordion rất hữu ích khi bạn muốn hiển thị nhiều thông tin trong một không gian hạn chế. Trong bài viết này, CodeTutHub sẽ hướng dẫn bạn cách sử dụng và tùy chỉnh thành phần Accordion trong Bootstrap 5 với các ví dụ cụ thể.

1. Tạo Accordion

Để tạo một accordion cơ bản, bạn sử dụng các class accordion, accordion-item, accordion-header, và accordion-collapse. Mỗi phần tử của accordion sẽ có một tiêu đề và một nội dung ẩn dưới tiêu đề đó.

Ví dụ Accordion

html
Thử online
<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 1
            </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                Nội dung của mục 1. Đây là nơi bạn có thể đưa các thông tin cần hiển thị.
            </div>
        </div>
    </div>
    <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">
                Mục 2
            </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                Nội dung của mục 2. Nội dung này sẽ hiển thị khi nhấn vào tiêu đề của mục 2.
            </div>
        </div>
    </div>
    <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">
                Mục 3
            </button>
        </h2>
        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                Nội dung của mục 3. Nội dung sẽ mở khi nhấn vào tiêu đề của mục 3.
            </div>
        </div>
    </div>
</div>

Trong ví dụ này:

  • accordion-item là phần tử chính của từng mục.
  • accordion-header chứa tiêu đề của mục.
  • accordion-button là nút có hiệu ứng gấp/mở nội dung khi nhấn vào.
  • accordion-collapse chứa nội dung, có class collapse để ẩn nội dung và class show để hiển thị mục đầu tiên mặc định.

2. Accordion với nhiều mục mở đồng thời

Theo mặc định, chỉ một mục có thể mở tại một thời điểm. Để cho phép nhiều mục mở cùng lúc, bạn loại bỏ thuộc tính data-bs-parent khỏi mỗi mục.

Ví dụ Accordion với nhiều mục mở đồng thời

html
Thử online
<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 1
            </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne">
            <div class="accordion-body">
                Nội dung của mục 1.
            </div>
        </div>
    </div>
    <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">
                Mục 2
            </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo">
            <div class="accordion-body">
                Nội dung của mục 2.
            </div>
        </div>
    </div>
    <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">
                Mục 3
            </button>
        </h2>
        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree">
            <div class="accordion-body">
                Nội dung của mục 3.
            </div>
        </div>
    </div>
</div>

Trong ví dụ này, không có thuộc tính data-bs-parent trong accordion-collapse, vì vậy nhiều mục có thể mở cùng lúc.

3. Accordion tùy chỉnh màu sắc và viền

Bạn có thể tùy chỉnh màu sắc và viền của accordion để phù hợp với giao diện website của mình bằng cách thêm các class Bootstrap hoặc CSS tùy chỉnh.

Ví dụ Accordion với màu sắc và viền tùy chỉnh

html
Thử online
<div class="accordion" id="accordionExample">
    <div class="accordion-item border border-primary">
        <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button bg-primary text-white" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Mục 1
            </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne">
            <div class="accordion-body">
                Nội dung của mục 1 với viền và màu sắc tùy chỉnh.
            </div>
        </div>
    </div>
    <div class="accordion-item border border-secondary">
        <h2 class="accordion-header" id="headingTwo">
            <button class="accordion-button collapsed bg-secondary text-white" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Mục 2
            </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo">
            <div class="accordion-body">
                Nội dung của mục 2.
            </div>
        </div>
    </div>
</div>

Trong ví dụ này:

  • border-primary và bg-primary thêm màu viền và màu nền tùy chỉnh cho mục đầu tiên.
  • border-secondary và bg-secondary tạo màu cho mục thứ hai.

4. Accordion có hoạt ảnh

Bootstrap 5 cung cấp hiệu ứng mượt mà khi mở hoặc đóng accordion. Tuy nhiên, bạn có thể thêm CSS để tăng cường hiệu ứng.

Ví dụ Accordion có hiệu ứng mượt mà hơn

Bạn có thể tùy chỉnh tốc độ của hoạt ảnh bằng cách thêm CSS:

css
.accordion-collapse {
    transition: all 0.5s ease;
}

Sau đó, sử dụng accordion như bình thường:

html
Thử online
<style>
.accordion-collapse {
    transition: all 0.5s ease;
}
</style>
<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 1
            </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne">
            <div class="accordion-body">
                Nội dung của mục 1 với hoạt ảnh mượt hơn.
            </div>
        </div>
    </div>
</div>

5. Accordion sử dụng hình ảnh hoặc biểu tượng

Bạn có thể thêm biểu tượng hoặc hình ảnh vào tiêu đề của accordion để tạo sự trực quan và nổi bật.

Ví dụ Accordion với biểu tượng

html
Thử online
<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">
                <i class="bi bi-image"></i> Mục có biểu tượng
            </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne">
            <div class="accordion-body">
                Nội dung của mục có biểu tượng hình ảnh.
            </div>
        </div>
    </div>
</div>

Trong ví dụ này, biểu tượng <i class="bi bi-image"> từ Bootstrap Icons được thêm vào trước văn bản tiêu đề.

Kết luận

Thành phần Accordion trong Bootstrap 5 giúp bạn tổ chức nội dung một cách khoa học, gọn gàng và dễ sử dụng. Từ các accordion cơ bản đến các tùy chỉnh nâng cao như màu sắc, hoạt ảnh và biểu tượng, bạn có thể xây dựng bố cục gấp gọn hiệu quả, tiết kiệm không gian cho website. Hãy thử áp dụng các ví dụ từ bài viết này để tạo accordion chuyên nghiệp và nâng cao trải nghiệm người dùng cho trang web của bạn!