Collapse

Toggle the visibility of content across your project with a few classes and our JavaScript plugins.

Collapse on Bootstrap

Basic Example

<p>
  <a class="btn btn-phoenix-secondary mt-2" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Link with href</a>
  <button class="btn btn-phoenix-secondary ms-sm-2 mt-2" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Button with data-bs-target</button>
</p>
<div class="collapse" id="collapseExample">
  <div class="border p-3 rounded">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>

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.

Multiple Targets

A <button> or <a> can show and hide multiple elements by referencing them with a selector in its href or data-bs-target attribute.Multiple <button> or <a> can show and hide an element if they each reference it with their href or data-bs-target attribute.

<p><a class="btn btn-phoenix-secondary mt-2 me-2" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a><button class="btn btn-phoenix-secondary mt-2 me-2" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button><button class="btn btn-phoenix-secondary mt-2" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button></p>
<div class="row">
  <div class="col-sm-6">
    <div class="collapse multi-collapse mb-3 mb-sm-0" id="multiCollapseExample1">
      <div class="card border">
        <div class="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>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card border">
        <div class="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>
    </div>
  </div>
</div>

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.
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.
On this page