Silicon UI Kit

##### Menu

Preview Docs

### Content

Typography Icon font Code Images & figures Tables

### Components

Accordion Alerts Audio player Badges Blog components Breadcrumb Buttons Button group Cards Carousel (Slider) Collapse Dropdowns Forms Gallery (Lightbox) Image comparison slider Input group List group Modal Navbar Offcanvas Pagination Parallax Pills Placeholders Popovers Portfolio components Pricing Progress bars Social buttons Spinners Steps Tabs Team Testimonials / reviews Toasts Tooltips Video popup

### Utilities

Bootstrap Silicon

# Collapse

Toggle the visibility of content.

Bootstrap docs

## Basic example

Link with href
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

    <!-- Link with href -->
    <a href="#collapseExample" class="btn btn-outline-primary" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseExample">
      Link with href
    </a>

    <!-- Button with data-bs-target -->
    <button type="button" class="btn btn-outline-primary" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
      Button with data-bs-target
    </button>

    <!-- Collapse -->
    <div class="collapse" id="collapseExample">
      <div class="card card-body mt-3">
        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
      </div>
    </div>

## Horizontal

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

    <!-- Horizotal (width) collapse -->
    <button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseHorizontal" aria-expanded="false" aria-controls="collapseHorizontal">
      Toggle width collapse
    </button>
    <div class="collapse collapse-horizontal" id="collapseHorizontal">
      <div class="card card-body mt-3" style="width: 25rem;">
        This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
      </div>
    </div>

## Multiple targets

Toggle first element
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.

    <!-- Toggle first element -->
    <a href="#multiCollapseExample1" class="btn btn-outline-primary my-1 me-2" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">
      Toggle first element
    </a>

    <!-- Toggle second element -->
    <button type="button" class="btn btn-outline-primary my-1 me-2" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">
      Toggle second element
    </button>

    <!-- Toggle both elements -->
    <button type="button" class="btn btn-outline-primary my-1" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">
      Toggle both elements
    </button>

    <div class="row">
      <div class="col-sm-6 mb-2 mb-sm-0">

        <!-- Collapse 1 -->
        <div class="collapse multi-collapse" id="multiCollapseExample1">
          <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>
      </div>
      <div class="col-sm-6">

        <!-- Collapse 2 -->
        <div class="collapse multi-collapse" id="multiCollapseExample2">
          <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>
      </div>
    </div>

Top