PhilBranding Phillip Mudavanhu UX Designer Logo Designer Buy now

Collapse

Toggle the visibility of content.

Bootstrap docs

Basic example

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.
<!-- Link with href -->
<a href="#collapseExample" class="btn btn-primary" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>

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

<!-- Collapse -->
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    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>
// Link with href
a(href="#collapseExample", data-toggle="collapse", role="button", aria-expanded="false", aria-controls="collapseExample").btn.btn-primary
  | Link with href

// Button with data-target
button(type="button", data-toggle="collapse", data-target="#collapseExample", aria-expanded="false", aria-controls="collapseExample").btn.btn-primary
  | Button with data-target

// Collapse
#collapseExample.collapse
  .card.card-body
    | 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.

Multiple targets

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-primary" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">
  Toggle first element
</a>

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

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

<div class="row">
  <div class="col-sm-6">

    <!-- Collapse 1 -->
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body mb-2">
        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 mb-2">
        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>
// Toggle first element
a(href="#multiCollapseExample1", data-toggle="collapse", role="button", aria-expanded="false", aria-controls="multiCollapseExample1").btn.btn-primary
  | Toggle first element

// Toggle second element
button(type="button", data-toggle="collapse", data-target="#multiCollapseExample2", aria-expanded="false", aria-controls="multiCollapseExample2").btn.btn-primary
  | Toggle second element

// Toggle both elements
button(type="button", data-toggle="collapse", data-target=".multi-collapse", aria-expanded="false", aria-controls="multiCollapseExample1 multiCollapseExample2").btn.btn-primary
  | Toggle both elements

.row
  .col-sm-6

    // Collapse 1
    #multiCollapseExample1.collapse.multi-collapse
      .card.card-body.mb-2
        | 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.
  .col-sm-6

    // Collapse 2
    #multiCollapseExample2.collapse.multi-collapse
      .card.card-body.mb-2
        | 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.

Accordion example

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.
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.
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.
<!-- Accordion made of cards -->
<div class="accordion" id="accordionExample">

  <!-- Card -->
  <div class="card">
    <div class="card-header" id="headingOne">
      <h3 class="accordion-heading">
        <a href="#collapseOne" role="button" data-toggle="collapse" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
          <span class="accordion-indicator"></span>
        </a>
      </h3>
    </div>
    <div class="collapse show" id="collapseOne" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        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>
  </div>

  <!-- Card -->
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h3 class="accordion-heading">
        <a href="#collapseTwo" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
          <span class="accordion-indicator"></span>
        </a>
      </h3>
    </div>
    <div class="collapse show" id="collapseTwo" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        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>
  </div>
</div>

<!-- Card -->
  <div class="card">
    <div class="card-header" id="headingThree">
      <h3 class="accordion-heading">
        <a href="#collapseThree" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
          <span class="accordion-indicator"></span>
        </a>
      </h3>
    </div>
    <div class="collapse show" id="collapseThree" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        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>
  </div>
</div>
// Accordion made of cards
#accordionExample.accordion

  // Card
  .card
    #headingOne.card-header
      h3.accordion-heading
        a(href="#collapseOne", role="button", data-toggle="collapse", aria-expanded="true", aria-controls="collapseOne")
          | Collapsible Group Item #1
          span.accordion-indicator
    #collapseOne.collapse.show(aria-labelledby="headingOne", data-parent="#accordionExample")
      .card-body
        | 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.

  // Card
  .card
    #headingTwo.card-header
      h3.accordion-heading
        a(href="#collapseTwo", role="button", data-toggle="collapse", aria-expanded="true", aria-controls="collapseTwo").collapsed
          | Collapsible Group Item #2
          span.accordion-indicator
    #collapseTwo.collapse(aria-labelledby="headingTwo", data-parent="#accordionExample")
      .card-body
        | 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.

  // Card
  .card
    #headingThree.card-header
      h3.accordion-heading
        a(href="#collapseThree", role="button", data-toggle="collapse", aria-expanded="true", aria-controls="collapseThree").collapsed
          | Collapsible Group Item #3
          span.accordion-indicator
    #collapseThree.collapse(aria-labelledby="headingThree", data-parent="#accordionExample")
      .card-body
        | 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.

Alternative styling

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.
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.
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.
<!-- Accordion made of cards -->
<div class="accordion" id="accordionExample">

  <!-- Card -->
  <div class="card border-0 box-shadow card-active">
    <div class="card-header" id="headingOne">
      <h3 class="accordion-heading">
        <a href="#collapseOne" role="button" data-toggle="collapse" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
          <span class="accordion-indicator"></span>
        </a>
      </h3>
    </div>
    <div class="collapse show" id="collapseOne" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        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>
  </div>

  <!-- Card -->
  <div class="card border-0 box-shadow">
    <div class="card-header" id="headingTwo">
      <h3 class="accordion-heading">
        <a href="#collapseTwo" role="button" data-toggle="collapse" aria-expanded="true" aria-controls="collapseTwo">
          Collapsible Group Item #2
          <span class="accordion-indicator"></span>
        </a>
      </h3>
    </div>
    <div class="collapse show" id="collapseTwo" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        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>
  </div>
</div>

<!-- Card -->
  <div class="card border-0 box-shadow">
    <div class="card-header" id="headingThree">
      <h3 class="accordion-heading">
        <a href="#collapseThree" role="button" data-toggle="collapse" aria-expanded="true" aria-controls="collapseThree">
          Collapsible Group Item #3
          <span class="accordion-indicator"></span>
        </a>
      </h3>
    </div>
    <div class="collapse show" id="collapseThree" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        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>
  </div>
</div>
// Accordion made of cards
#accordionExample.accordion.accordion-alt

  // Card
  .card.border-0.box-shadow.card-active
    #headingOne.card-header
      h3.accordion-heading
        a(href="#collapseOne", role="button", data-toggle="collapse", aria-expanded="true", aria-controls="collapseOne")
          | Collapsible Group Item #1
          span.accordion-indicator
    #collapseOne.collapse.show(aria-labelledby="headingOne", data-parent="#accordionExample")
      .card-body
        | 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.

  // Card
  .card.border-0.box-shadow
    #headingTwo.card-header
      h3.accordion-heading
        a(href="#collapseTwo", role="button", data-toggle="collapse", aria-expanded="true", aria-controls="collapseTwo").collapsed
          | Collapsible Group Item #2
          span.accordion-indicator
    #collapseTwo.collapse(aria-labelledby="headingTwo", data-parent="#accordionExample")
      .card-body
        | 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.

  // Card
  .card.border-0.box-shadow
    #headingThree.card-header
      h3.accordion-heading
        a(href="#collapseThree", role="button", data-toggle="collapse", aria-expanded="true", aria-controls="collapseThree").collapsed
          | Collapsible Group Item #3
          span.accordion-indicator
    #collapseThree.collapse(aria-labelledby="headingThree", data-parent="#accordionExample")
      .card-body
        | 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.
Top