Bootstrap 5 Framework

Collapse

13 min Lesson 34 of 40

Collapse Component in Bootstrap 5

The collapse component allows you to toggle the visibility of content. It's useful for creating accordions, expandable sections, and progressive disclosure patterns. Collapse can show or hide content with smooth animations.

Basic Collapse Functionality

The simplest collapse pattern involves a trigger element and a target element.

<!-- Trigger Button -->
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample">
    Toggle Content
</button>

<!-- Collapsible Content -->
<div class="collapse" id="collapseExample">
    <div class="card card-body">
        This is the collapsible content. It can contain any HTML elements including text, images, forms, and more.
    </div>
</div>
        

How it Works: The data-bs-toggle="collapse" attribute triggers the collapse, and data-bs-target points to the element's ID to be collapsed.

Show Content by Default

Add the show class to display collapsed content initially.

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseShown">
    Toggle Content
</button>

<!-- Shown by default -->
<div class="collapse show" id="collapseShown">
    <div class="card card-body">
        This content is visible by default and can be collapsed.
    </div>
</div>
        

Multiple Collapse Targets

One button can control multiple collapse elements, and multiple buttons can control one element.

<!-- One button, multiple targets -->
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse">
    Toggle Both
</button>

<div class="collapse multi-collapse" id="collapseFirst">
    <div class="card card-body">
        First collapsible element
    </div>
</div>

<div class="collapse multi-collapse" id="collapseSecond">
    <div class="card card-body">
        Second collapsible element
    </div>
</div>

<!-- Multiple buttons, one target -->
<button class="btn btn-success" type="button" data-bs-toggle="collapse" data-bs-target="#sharedCollapse">
    Toggle from Button 1
</button>

<button class="btn btn-warning" type="button" data-bs-toggle="collapse" data-bs-target="#sharedCollapse">
    Toggle from Button 2
</button>

<div class="collapse" id="sharedCollapse">
    <div class="card card-body">
        This content can be toggled by either button.
    </div>
</div>
        

Accordion-Style Collapse

Accordions allow only one collapse item to be open at a time within a parent container.

<div class="accordion" id="accordionExample">
    <!-- Accordion Item 1 -->
    <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">
                <strong>This is the first item's content.</strong> It is shown by default with the show class.
            </div>
        </div>
    </div>

    <!-- Accordion Item 2 -->
    <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 content. Opening this will close the first item.
            </div>
        </div>
    </div>

    <!-- Accordion Item 3 -->
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree">
                Accordion Item #3
            </button>
        </h2>
        <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                This is the third item's content. It follows the same pattern as the others.
            </div>
        </div>
    </div>
</div>
        

Key Feature: The data-bs-parent attribute ensures only one accordion item is open at a time. Remove it to allow multiple items to be open simultaneously.

Accordion Flush Style

Create accordions without borders and rounded corners for seamless integration.

<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 Accordion Item #1
            </button>
        </h2>
        <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlush">
            <div class="accordion-body">
                This accordion has no borders or background colors, perfect for seamless layouts.
            </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 Accordion Item #2
            </button>
        </h2>
        <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlush">
            <div class="accordion-body">
                The flush style removes borders and rounded corners.
            </div>
        </div>
    </div>
</div>
        

Always Open Accordion

Allow multiple accordion items to be open simultaneously by removing data-bs-parent.

<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="#openOne">
                Item #1
            </button>
        </h2>
        <div id="openOne" class="accordion-collapse collapse show">
            <div class="accordion-body">
                This item can stay open while others are opened.
            </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="#openTwo">
                Item #2
            </button>
        </h2>
        <div id="openTwo" class="accordion-collapse collapse">
            <div class="accordion-body">
                Multiple items can be open at the same time.
            </div>
        </div>
    </div>
</div>
        

Horizontal Collapse

Collapse content horizontally instead of vertically using .collapse-horizontal.

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseHorizontal">
    Toggle Horizontal Collapse
</button>

<div style="min-height: 120px;">
    <div class="collapse collapse-horizontal" id="collapseHorizontal">
        <div class="card card-body" style="width: 300px;">
            This content collapses horizontally from left to right.
        </div>
    </div>
</div>
        

Note: Set a specific width on the collapsing element when using horizontal collapse. The parent container should have enough space to accommodate the element.

Collapse with Links

Use links instead of buttons to trigger collapse.

<!-- Link trigger -->
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseLink" role="button">
    Link with href
</a>

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLink">
    Button with data-bs-target
</button>

<div class="collapse" id="collapseLink">
    <div class="card card-body">
        This can be toggled by either the link or button.
    </div>
</div>
        

Collapse JavaScript API

Control collapse programmatically with JavaScript.

<script>
// Get collapse element
const collapseEl = document.getElementById('myCollapse');

// Create collapse instance with options
const collapse = new bootstrap.Collapse(collapseEl, {
    toggle: false,    // Don't toggle on initialization
    parent: null      // Parent selector for accordion behavior
});

// Show collapse
collapse.show();

// Hide collapse
collapse.hide();

// Toggle collapse
collapse.toggle();

// Dispose collapse instance
collapse.dispose();

// Static method - get or create instance
const collapseInstance = bootstrap.Collapse.getOrCreateInstance(collapseEl);

// Event listeners
collapseEl.addEventListener('show.bs.collapse', function (event) {
    console.log('Collapse is about to show');
});

collapseEl.addEventListener('shown.bs.collapse', function (event) {
    console.log('Collapse is fully shown');
});

collapseEl.addEventListener('hide.bs.collapse', function (event) {
    console.log('Collapse is about to hide');
});

collapseEl.addEventListener('hidden.bs.collapse', function (event) {
    console.log('Collapse is fully hidden');
});
</script>
        

Advanced Accordion Example

Create a complex FAQ accordion with icons and custom styling.

<style>
.faq-accordion .accordion-button:not(.collapsed) {
    color: #0d6efd;
    background-color: #e7f1ff;
}

.faq-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
</style>

<div class="accordion faq-accordion" id="faqAccordion">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
                What is Bootstrap?
            </button>
        </h2>
        <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
            <div class="accordion-body">
                Bootstrap is a powerful front-end framework for building responsive, mobile-first websites and web applications.
            </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="#faq2">
                How do I install Bootstrap?
            </button>
        </h2>
        <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
            <div class="accordion-body">
                You can install Bootstrap via CDN, npm, or by downloading the compiled CSS and JavaScript files.
            </div>
        </div>
    </div>
</div>
        

Nested Collapse

Create hierarchical collapse structures by nesting collapse elements.

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#parentCollapse">
    Parent Collapse
</button>

<div class="collapse" id="parentCollapse">
    <div class="card card-body">
        <p>This is the parent collapse content.</p>

        <button class="btn btn-sm btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#childCollapse">
            Child Collapse
        </button>

        <div class="collapse mt-2" id="childCollapse">
            <div class="card card-body">
                This is nested inside the parent collapse.
            </div>
        </div>
    </div>
</div>
        

Practice Exercise

Task 1: Create a product features section with collapse:

Create 4 feature cards with titles
Each card should have a "Learn More" button that expands to show detailed information
Use smooth transitions and appropriate spacing
Add icons to indicate expand/collapse state

Task 2: Build a comprehensive FAQ page with an advanced accordion:

Create at least 6 FAQ items organized in an accordion
First item should be open by default
Add custom styling with hover effects
Include a "Show All" button that programmatically opens all items
Include a "Hide All" button that collapses all items

Bonus Challenge: Create a multi-level navigation menu using nested collapse components. Include:

Main menu items with sub-menus
Nested sub-menus (3 levels deep)
Icons indicating expandable items
Smooth animations
Active state styling

Best Practices

Use accordions for FAQs and content-heavy sections to improve scannability
Always provide clear visual indicators (icons/text) showing collapse state
Ensure collapse triggers are keyboard accessible (use proper button elements)
Add appropriate ARIA attributes for screen readers
Keep collapse animations smooth and not too slow (default timing is good)
For accordions, decide whether single or multiple open items better suits your use case
Use horizontal collapse sparingly - it can be disorienting for users
Test nested collapse structures thoroughly to ensure they work correctly
Consider using the show class to display important content by default
Add loading states if collapse content is fetched dynamically

Accessibility Considerations

Bootstrap automatically adds ARIA attributes, but verify they're present
Use semantic HTML (buttons for triggers, not divs)
Ensure keyboard navigation works (Tab, Enter, Space keys)
Provide clear labels that describe what will be expanded
Test with screen readers to ensure proper announcement