Collapse

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

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa explicabo pariatur fuga maiores quasi eum ex cupiditate ea, suscipit dolorum iure quam veritatis ipsum molestiae nobis quas animi. Voluptatum, nobis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque aliquam, assumenda dolor veritatis nesciunt numquam commodi quaerat. Pariatur debitis tenetur necessitatibus similique placeat id, voluptate nesciunt dolor dolorum quidem quae.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem tenetur quam error minus odit, tempore et quis, enim corporis perspiciatis numquam modi doloremque rerum ducimus, quidem delectus unde similique nostrum.

<div class="accordion accordion-minimal accordion-minimal-sm" id="accordion-2">
  <div class="card active">
    <div class="card-header" id="heading-2-1">
      <h5 class="mb-0">
        <button class="btn btn-block" type="button" data-toggle="collapse" data-target="#collapse-2-1" aria-expanded="true" aria-controls="collapse-2-1">
          First Collapsible Group Item
        </button>
      </h5>
    </div>

    <div id="collapse-2-1" class="collapse show" aria-labelledby="heading-2-1" data-parent="#accordion-2">
      <div class="card-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa explicabo pariatur fuga maiores quasi eum ex cupiditate ea, suscipit dolorum iure quam veritatis ipsum molestiae nobis quas animi. Voluptatum, nobis.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="heading-2-2">
      <h5 class="mb-0">
        <button class="btn btn-block collapsed" type="button" data-toggle="collapse" data-target="#collapse-2-2" aria-expanded="false" aria-controls="collapse-2-2">
          Second Collapsible Group Item
        </button>
      </h5>
    </div>
    <div id="collapse-2-2" class="collapse" aria-labelledby="heading-2-2" data-parent="#accordion-2">
      <div class="card-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque aliquam, assumenda dolor veritatis nesciunt numquam commodi quaerat. Pariatur debitis tenetur necessitatibus similique placeat id, voluptate nesciunt dolor dolorum quidem quae.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="heading-2-3">
      <h5 class="mb-0">
        <button class="btn btn-block collapsed" type="button" data-toggle="collapse" data-target="#collapse-2-3" aria-expanded="false" aria-controls="collapse-2-3">
          Third Collapsible Group Item
        </button>
      </h5>
    </div>
    <div id="collapse-2-3" class="collapse" aria-labelledby="heading-2-3" data-parent="#accordion-2">
      <div class="card-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem tenetur quam error minus odit, tempore et quis, enim corporis perspiciatis numquam modi doloremque rerum ducimus, quidem delectus unde similique nostrum.</p>
      </div>
    </div>
  </div>
</div>

Minimal

<div class="accordion accordion-minimal accordion-minimal-sm" id="accordion-2">
  <div class="card active">
    <div class="card-header" id="heading-2-1">
      <h5 class="mb-0">
        <button class="btn btn-block" type="button" data-toggle="collapse" data-target="#collapse-2-1" aria-expanded="true" aria-controls="collapse-2-1">
          First Collapsible Group Item
        </button>
      </h5>
    </div>

    <div id="collapse-2-1" class="collapse show" aria-labelledby="heading-2-1" data-parent="#accordion-2">
      <div class="card-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa explicabo pariatur fuga maiores quasi eum ex cupiditate ea, suscipit dolorum iure quam veritatis ipsum molestiae nobis quas animi. Voluptatum, nobis.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="heading-2-2">
      <h5 class="mb-0">
        <button class="btn btn-block collapsed" type="button" data-toggle="collapse" data-target="#collapse-2-2" aria-expanded="false" aria-controls="collapse-2-2">
          Second Collapsible Group Item
        </button>
      </h5>
    </div>
    <div id="collapse-2-2" class="collapse" aria-labelledby="heading-2-2" data-parent="#accordion-2">
      <div class="card-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque aliquam, assumenda dolor veritatis nesciunt numquam commodi quaerat. Pariatur debitis tenetur necessitatibus similique placeat id, voluptate nesciunt dolor dolorum quidem quae.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="heading-2-3">
      <h5 class="mb-0">
        <button class="btn btn-block collapsed" type="button" data-toggle="collapse" data-target="#collapse-2-3" aria-expanded="false" aria-controls="collapse-2-3">
          Third Collapsible Group Item
        </button>
      </h5>
    </div>
    <div id="collapse-2-3" class="collapse" aria-labelledby="heading-2-3" data-parent="#accordion-2">
      <div class="card-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem tenetur quam error minus odit, tempore et quis, enim corporis perspiciatis numquam modi doloremque rerum ducimus, quidem delectus unde similique nostrum.</p>
      </div>
    </div>
  </div>
</div>