Bootstrap 5 Accordion

An accordion is a UI pattern used to organize and present content in a collapsible and space-efficient manner. It allows you to display a list of items or sections where only one section is expanded or visible at a time. When a user clicks on a section's header, it expands to reveal its content, and the previously open section collapses, providing a neat and structured way to present information or options.

Bootstrap Accordion provides an easy way to implement this behavior in your web applications. It typically consists of a series of collapsible panels or sections, where each panel contains a heading and content. When a user clicks on a panel's heading, the associated content expands or collapses smoothly. Here's how you can create an Accordion.

Accordion Example

Create the accordion structure in your HTML. Each accordion item consists of a heading and a collapsible content section. Here's a basic example of how to create an Accordion:

<div class="accordion" id="accordionExample">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Accordion Item #1
            </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                Content for Accordion Item #1 goes here.
            </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="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Accordion Item #2
            </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                Content for Accordion Item #2 goes here.
            </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="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                Accordion Item #3
            </button>
        </h2>
        <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                Content for Accordion Item #3 goes here.
            </div>
        </div>
    </div>
    <!-- Repeat the above structure for each accordion item -->
</div>

Here is the explanation of the above code

• .accordion: Applied to the parent element to initialize the Accordion that holds all the panels.
• .accordion-item: Applied to each panel or section within the Accordion.
• .accordion-header: Applied to the heading element within each panel.
• .accordion-button: Applied to the button within the heading element, which triggers the opening and closing of the panel.
• .accordion-collapse: Applied to the content container of each panel.
• .collapse: Used to hide or show the content within each panel.
• The data-bs-toggle and data-bs-target attributes determine which content is toggled when the button is clicked. In this example, we use IDs to connect the button to the content.
• To ensure that only one panel is open at a time (typical behavior for an Accordion), you can use the data-bs-parent attribute to specify the parent container of the Accordion. This attribute restricts the Accordion behavior to only one panel within that parent container.

That's it! You now have a basic accordion. Users can click on the accordion headers to expand or collapse the corresponding content sections. You can add more accordion items by duplicating the structure within the <div class="accordion"> container.

Accordion Flush

The .accordion-flush class is used to modify the styling of accordion panels to make them edge-to-edge with their parent container by removing some borders and rounded corners. This class can be particularly useful when you want a cleaner and more seamless appearance for your accordions, eliminating extra visual elements like borders and rounded corners.

<div class="accordion accordion-flush" id="accordionFlushExample">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                Accordion Item #1
            </button>
        </h2>
        <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">Content for Section 1 goes here.</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="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                Accordion Item #2
            </button>
        </h2>
        <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">
                Content for Section 2 goes here.
            </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="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
                Accordion Item #3
            </button>
        </h2>
        <div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">
                Content for Section 3 goes here.
            </div>
        </div>
    </div>
</div>

In this example, we've created an accordion with three sections, each with its own header and content. The .accordion-flush class is applied to the parent <div> with the class .accordion, which removes borders and rounded corners, creating a clean and borderless design for the accordion panels.

Applying the .accordion-flush class to the parent container ensures that all accordion panels within it will have the specified styling to make them appear edge-to-edge with their container.

Multi-Open Accordion

By default, accordion allows only one section to be open at a time. However, in some cases, you may want to create an accordion where multiple sections can stay open simultaneously.

To create an Accordion where multiple sections can stay open when another section is opened, we need to omit the data-bs-parent attribute from the .accordion-collapse elements. This modification will allow each section to open and close independently, giving us the desired behavior.

<div class="accordion" id="accordionStayOpenExample">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#stayOpen-collapseOne" aria-expanded="true" aria-controls="stayOpen-collapseOne">
                Accordion Item #1
            </button>
        </h2>
        <div id="stayOpen-collapseOne" class="accordion-collapse collapse show">
            <div class="accordion-body">
                <strong>Content for first item goes here.</strong>
            </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="#stayOpen-collapseTwo" aria-expanded="false" aria-controls="stayOpen-collapseTwo">
                Accordion Item #2
            </button>
        </h2>
        <div id="stayOpen-collapseTwo" class="accordion-collapse collapse">
            <div class="accordion-body">
                <strong>Content for second item goes here.</strong>
            </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="#stayOpen-collapseThree" aria-expanded="false" aria-controls="stayOpen-collapseThree">
                Accordion Item #3
            </button>
        </h2>
        <div id="stayOpen-collapseThree" class="accordion-collapse collapse">
            <div class="accordion-body">
                <strong>Content for third item goes here.</strong>
            </div>
        </div>
    </div>
</div>

In this HTML structure, we have three sections within the accordion, each with its header and content. The data-bs-parent attribute has been omitted from each .accordion-collapse element. Removing this attribute allows each section to open and close independently, making it possible to keep multiple sections open simultaneously.

Keep in mind that using an always-open accordion might not be suitable for all scenarios, especially if you have a lot of content, as it can result in a long page. Make sure it aligns with your design and user experience goals.

Customizing Accordion

Bootstrap 5 provides custom CSS variables that allow you to customize the accordion's appearance easily. You can use these variables to change colors, padding, icons, and more. For example, to change the accordion's background color and text color, you can set the --bs-accordion-bg and --bs-accordion-color variables like this:

.accordion {
    --bs-accordion-bg: #f0f0f0; /* Change background color */
    --bs-accordion-color: #333; /* Change text color */
}

Modify other variables as needed to achieve the desired styling. Here is the list of variables of the Accordion component.

These variables offer you extensive control over the styling and behavior of Accordions, allowing you to create custom designs and experiences that fit your specific project requirements.

Change Accordion Icon

To change the icon used in the accordion button (section header) using the custom CSS variables, you can override the --bs-accordion-btn-icon variable with a new URL-encoded SVG image. Here's how you can do it:

1. Prepare the custom SVG icon you want to use and encode it as a data URI. You can use online tools like Data URI Generator or Url Encode to convert your SVG image into a data URI. Ensure the SVG image represents the icon you want to replace the default one with.
2. Once you have the data URI for your SVG icon, you can set the --bs-accordion-btn-icon variable to use it. Here's an example of how to change the accordion button icon:

.accordion {
    --bs-accordion-btn-icon-transform: rotate(180deg);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z'/%3E%3C/svg%3E");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-up' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z'/%3E%3C/svg%3E");
}

By following these steps and using the --bs-accordion-btn-icon variable, you can easily replace the default Bootstrap 5 accordion button icon with your custom SVG icon.

In summary, Accordion is a valuable tool for web developers looking to create organized and interactive interfaces, and it can enhance the user experience on your website or web application.