Bootstrap 5 Accordion

Accordion Features

<button class="accordion-button">
  Click to toggle
</button>

<div class="accordion-item">
  <!-- item -->
</div>

<!-- Remove data-bs-parent -->
<div class="accordion-collapse">

.accordion-button {
  background: #f0f0f0;
}

🔹 Basic Accordion

The basic Bootstrap accordion creates vertically stacked, collapsible panels where only one item can be open at a time, managed by the data-bs-parent attribute. It consists of a series of .accordion-item elements, each containing a clickable header (.accordion-header) and a collapsible body (.accordion-collapse). This component is perfect for FAQs, product details, or any content where you need to conserve space and reduce scrolling. For SEO, ensure all accordion content is loaded in the HTML source (not fetched dynamically) so search engines can crawl and index it fully, improving your page's relevance and potential for rich results.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<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">
                Accordion Item #1
            </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                This is the first item's accordion body.
            </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">
                Accordion Item #2
            </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                This is the second item's accordion body.
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

🔹 Always Open Accordion

An "always open" accordion allows multiple panels to remain expanded simultaneously by omitting the data-bs-parent attribute on the collapsible elements. This variation is ideal for content comparison, instructional steps, or interfaces where users need to reference multiple sections at once without them automatically closing. It enhances the user experience by providing greater control and reducing interaction cost. From an SEO and accessibility perspective, this pattern still requires all content to be present in the initial page load. Consider the user's intent; if all content is crucial for understanding, this layout can improve dwell time by making information easily accessible.

<div class="accordion" id="accordionAlwaysOpen">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelOne">
                Panel 1
            </button>
        </h2>
        <div id="panelOne" class="accordion-collapse collapse show">
            <div class="accordion-body">
                First panel content stays open.
            </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="#panelTwo">
                Panel 2
            </button>
        </h2>
        <div id="panelTwo" class="accordion-collapse collapse">
            <div class="accordion-body">
                Second panel can open independently.
            </div>
        </div>
    </div>
</div>

🔹 Flush Accordion

The flush accordion, created by adding the .accordion-flush class, removes the default background color, borders, and rounded corners. This results in a minimalist, edge-to-edge design that blends seamlessly into its container, making it perfect for sidebars, mobile navigation, or minimalist interfaces. The visual simplicity reduces distraction and focuses attention solely on the content. For SEO, the cleaner design can improve page speed by reducing graphical load and complexity. It also often aligns with mobile-first design principles, creating a better experience on smaller screens where space is limited, which can positively impact mobile usability scores.

<div class="accordion accordion-flush" id="accordionFlush">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne">
                Flush Item #1
            </button>
        </h2>
        <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlush">
            <div class="accordion-body">
                Flush accordion removes borders and rounded corners.
            </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">
                Flush Item #2
            </button>
        </h2>
        <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlush">
            <div class="accordion-body">
                Perfect for seamless integration with your design.
            </div>
        </div>
    </div>
</div>

🔹 Styled Accordion

Customize accordions beyond Bootstrap's defaults by overriding CSS variables or adding your own classes to modify colors, fonts, icons, spacing, and animation. You can style the header background on hover, change the collapse icon, or adjust transition speeds to match your brand identity. A well-styled, unique accordion improves user engagement and brand recognition. For technical SEO, ensure custom styles are implemented efficiently to avoid render-blocking or large CSS files that slow down page load. Customized interactive elements that enhance usability can lead to lower bounce rates and longer session durations, sending positive qualitative signals to search engines about your site's value.

<style>
    .custom-accordion .accordion-button {
        background-color: #0d6efd;
        color: white;
        font-weight: bold;
    }
    
    .custom-accordion .accordion-button:not(.collapsed) {
        background-color: #0a58ca;
        color: white;
    }
    
    .custom-accordion .accordion-body {
        background-color: #f8f9fa;
        border-left: 4px solid #0d6efd;
    }
</style>

<div class="accordion custom-accordion" id="styledAccordion">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#styleOne">
                Custom Styled Item
            </button>
        </h2>
        <div id="styleOne" class="accordion-collapse collapse show" data-bs-parent="#styledAccordion">
            <div class="accordion-body">
                This accordion has custom colors and styling!
            </div>
        </div>
    </div>
</div>