Bootstrap Collapse

Overview

Collapse is used to show and hide content with smooth transitions.

Basic Collapse

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

<div class="collapse" id="collapseExample">
    <div class="card card-body">
        This is collapsible content.
    </div>
</div>

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

Next Steps

Next: Bootstrap Navs →