Prev Next

BS5 Collapse

Bootstrap 5 Collapse provides a simple and elegant way to toggle the visibility of content. It can be used for accordions, toggleable sections, and more.

Key Topics

Basic Collapse

Create a collapsible element using the .collapse class and a toggle button.

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Toggle Content
</button>
<div class="collapse" id="collapseExample">
    <div class="card card-body">
        This is collapsible content.
    </div>
</div>

Explanation: The data-bs-toggle attribute toggles the collapse, while data-bs-target specifies the target element.

Accordion

Accordions are collapsible elements grouped together. Use the .accordion class to group collapsible content.

<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">
                Accordion Item #1
            </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                Content for item #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">
                Accordion Item #2
            </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                Content for item #2.
            </div>
        </div>
    </div>
</div>

Explanation: Accordions use data-bs-parent to ensure only one item is expanded at a time.

Nested Collapse

Nest collapsible elements inside other collapsible containers for complex layouts.

<div class="collapse" id="parentCollapse">
    <div class="card card-body">
        Parent content.
        <button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#nestedCollapse">
            Toggle Nested Content
        </button>
        <div class="collapse" id="nestedCollapse">
            Nested content here.
        </div>
    </div>
</div>

Explanation: Nest collapsible elements by placing one collapse inside another with separate toggle buttons.

Complete Collapse Example

This example combines basic collapse, accordion, and nested collapse functionality in one layout.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Collapse Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2>Bootstrap Collapse</h2>

        <h3>Basic Collapse</h3>
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
            Toggle Content
        </button>
        <div class="collapse" id="collapseExample">
            <div class="card card-body">
                This is collapsible content.
            </div>
        </div>

        <h3>Accordion</h3>
        <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">
                        Accordion Item #1
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        Content for item #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">
                        Accordion Item #2
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        Content for item #2.
                    </div>
                </div>
            </div>
        </div>

        <h3>Nested Collapse</h3>
        <div class="collapse" id="parentCollapse">
            <div class="card card-body">
                Parent content.
                <button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#nestedCollapse">
                    Toggle Nested Content
                </button>
                <div class="collapse" id="nestedCollapse">
                    Nested content here.
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This example combines basic collapse, accordion, and nested collapse for a comprehensive demonstration.

Key Takeaways

  • Use .collapse for toggleable sections.
  • Create grouped collapsible elements with .accordion.
  • Support complex layouts using nested collapsibles.
Prev Next