Collapse Extended

Custom additions to the Collapse component

On this page

Opened/Closed toggle

Using elements with the class .collapse-closed or .collapse-opened within the collapse toggle, you can show/hide different content depending on the collapse state.

This does require the use of aria-expanded on the collapse toggle.

Example

Click the button below to see it’s text change.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

html

<p>
  <button class="btn btn-primary collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    <span class="collapse-closed">Open</span>
    <span class="collapse-opened">Close</span>
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>