Skip to main content Skip to docs navigation
View on GitHub

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>

Other types

Toggle (with icon button)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec justo leo, cursus et sodales non, tincidunt vel nunc.
html 
<div class="p-3">
  <a
    class="text-body text-decoration-none"
    data-bs-toggle="collapse"
    href="#collapseExample1"
    role="button"
    aria-expanded="false"
    aria-controls="collapseExample1"
  >
    <div class="collapse-opened">
      <div class="d-flex justify-content-between align-items-center">
        <div>
          <h3 class="text-secondary mb-0">Toggle</h3>
        </div>
        <div>
          <div
            class="btn btn-icon-md btn-icon-default active rounded-circle"
          >
            <span class="far fa-angle-up"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="collapse-closed">
      <div class="d-flex justify-content-between align-items-center">
        <div>
          <h3 class="mb-0">Toggle</h3>
        </div>
        <div>
          <div
            class="btn btn-icon-md btn-icon-default rounded-circle"
          >
            <span class="pt-1 fa fa-angle-down"></span>
          </div>
        </div>
      </div>
    </div>
  </a>
  <div class="collapse" id="collapseExample1">
    <div class="pt-3">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
      justo leo, cursus et sodales non, tincidunt vel nunc.
    </div>
  </div>
  <hr>
</div>

Toggle compact

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec justo leo, cursus et sodales non, tincidunt vel nunc. Vivamus hendrerit elit id interdum fringilla.
html 
<a
  class="h5 text-decoration-none"
  data-bs-toggle="collapse"
  href="#collapseExample2"
  role="button"
  aria-expanded="false"
  aria-controls="collapseExample2"
>
  <div class="collapse-opened">
    <div class="d-flex justify-content-between">
      <div class="text-secondary">Toggle</div>
      <div>
        <span class="far fa-angle-up"></span>
      </div>
    </div>
  </div>
  <div class="collapse-closed">
    <div class="d-flex justify-content-between">
      <div>Toggle</div>
      <div>
        <span class="far fa-angle-down"></span>
      </div>
    </div>
  </div>
</a>
<div class="collapse" id="collapseExample2">
  <div class="pt-3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
    justo leo, cursus et sodales non, tincidunt vel nunc. Vivamus
    hendrerit elit id interdum fringilla.
  </div>
</div>
<hr>

Toggle compact invert

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec justo leo, cursus et sodales non, tincidunt vel nunc. Vivamus hendrerit elit id interdum fringilla.
html 
<div class="bg-secondary-70 p-3">
<a
  class="h5 text-white text-decoration-none d-flex justify-content-between"
  data-bs-toggle="collapse"
  href="#collapseExample3"
  role="button"
  aria-expanded="false"
  aria-controls="collapseExample3"
>
  <div>Toggle</div>
  <div>
    <span class="far fa-angle-up collapse-opened"></span>
    <span class="far fa-angle-down collapse-closed"></span>
  </div>
</a>
<div class="collapse" id="collapseExample3">
  <div class="text-white pt-3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
    justo leo, cursus et sodales non, tincidunt vel nunc. Vivamus
    hendrerit elit id interdum fringilla.
  </div>
</div>
<hr class="border-secondary opacity-100">
</div>