Bootstrap Accordion

Table of Contents

Trong hướng dẫn này, bạn sẽ học cách tạo accordion bằng Bootstrap.

Accordion là một loạt các bảng xếp chồng lên nhau.

Các menu và widget của Accordion được sử dụng rộng rãi trong các ứng dụng web để quản lý lượng lớn nội dung và danh sách điều hướng trong một diện tích nhỏ. Với plugin thu gọn của Bootstrap, bạn có thể tạo accordion hoặc hiển thị và ẩn nội dung mà không cần viết bất kỳ mã JavaScript nào.

Hãy xem cách tạo một widget accordion đơn giản bằng cách sử dụng plugin thu gọn của Bootstrap.

<div class="accordion" id="myAccordion">
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
            <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseOne">1. What is HTML?</button>									
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
            <div class="card-body">
                <p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. <a href="https://comdy.vn/lap-trinh-html-co-ban/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingTwo">
            <button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">2. What is Bootstrap?</button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse show" data-bs-parent="#myAccordion">
            <div class="card-body">
                <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="https://comdy.vn/bootstrap/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingThree">
            <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree">3. What is CSS?</button>                     
        </h2>
        <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
            <div class="card-body">
                <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="https://comdy.vn/lap-trinh-css/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Sử dụng icon dấu cộng trừ cho Bootstrap Accordion

Bạn cũng có thể sử dụng các icon dấu cộng trừ trong widget accordion Bootstrap (thay cho icon chữ v, xuống và lên) với một vài dòng mã CSS tùy chỉnh. Hãy thử ví dụ sau:

<style>
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
    transform: scale(0.75) !important;
}
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
}
</style>

Kết quả của ví dụ trên sẽ giống như sau:

Xóa viền bao quanh của Bootstrap Accordion

Bạn có thể tùy chọn thêm lớp .accordion-flush vào phần tử .accordion để loại bỏ các đường viền bên ngoài và các góc tròn để tạo accordion nằm liền với vùng chứa của chúng.

Hãy xem ví dụ sau để hiểu cách nó thực sự hoạt động:

<div class="accordion accordion-flush" id="myAccordion">
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
            <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseOne">1. What is HTML?</button>									
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
            <div class="card-body">
                <p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. <a href="https://comdy.vn/lap-trinh-html-co-ban/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingTwo">
            <button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">2. What is Bootstrap?</button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse show" data-bs-parent="#myAccordion">
            <div class="card-body">
                <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="https://comdy.vn/bootstrap/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingThree">
            <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree">3. What is CSS?</button>                     
        </h2>
        <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
            <div class="card-body">
                <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="https://comdy.vn/lap-trinh-css/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
</div>

Kết quả của ví dụ trên sẽ giống như sau: