In Bootstrap 5 (BS5), the Collapse component allows you to toggle content visibility — perfect for things like accordions, hide/show sections, and toggled navbars.

? Basic Collapse Example

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

• data-bs-toggle="collapse": Activates collapse behavior

• href="#collapseExample" or data-bs-target="#id": Specifies the content to toggle

• .collapse: Hides content by default

• .show: Makes the content visible

? Button Trigger Example

<button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseContent" aria-expanded="false" aria-controls="collapseContent">  Toggle with Button</button><div class="collapse" id="collapseContent">  <div class="card card-body">    Collapsible content triggered by button.  </div></div>

? Multiple Targets

You can target multiple elements at once:

<a class="btn btn-info" data-bs-toggle="collapse" href="#multiCollapse1" role="button">Toggle First</a><button class="btn btn-info" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapse2">Toggle Second</button><button class="btn btn-warning" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse">Toggle Both</button><div class="row mt-3">  <div class="col">    <div class="collapse multi-collapse" id="multiCollapse1">      <div class="card card-body">First collapsible content.</div>    </div>  </div>  <div class="col">    <div class="collapse multi-collapse" id="multiCollapse2">      <div class="card card-body">Second collapsible content.</div>    </div>  </div></div>

? Accordion (Collapse Group)

Accordion is a structured set of collapsibles that allows only one section open at a time.

<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">        Accordion Item #1      </button>    </h2>    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">      <div class="accordion-body">        First item's content.      </div>    </div>  </div>  <!-- Repeat for more items --></div>

?? JavaScript API Example

var collapseElement = document.getElementById('collapseExample');var bsCollapse = new bootstrap.Collapse(collapseElement, {  toggle: false});bsCollapse.show(); // or .hide()

Would you like examples for animated collapses, collapsible navbars, or nested accordions?