Collapse

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

Example

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
HTML

<ul class="d-flex flex-wrap gap g-3 pb-3">
  <li>
    <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
      Link with href
    </a>
  </li>
  <li>
    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
      Button with data-bs-target
    </button>
  </li>
</ul>

Horizontal

The collapse plugin also supports horizontal collapsing. Add the .collapse-horizontal modifier class to transition the width instead of height and set a width on the immediate child element.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
HTML

<div class="pb-3">
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</div>
<div style="min-height: 150px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

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

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
HTML

<ul class="d-flex flex-wrap gap g-3 pb-3">
  <li><a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false">Toggle first element</a></li>
  <li><button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false">Toggle second element</button></li>
  <li><button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false">Toggle both elements</button></li>
</ul>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse show" id="multiCollapseExample1">
      <div class="card card-body">
        Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
</div>
© 2022 Nioboard. Template by Softnio
Recent Notification