Accordions

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

Default

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" id="accordion-1">
  <div class="card active">
    <div class="card-header" id="heading-1-1">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse-1-1" aria-expanded="true" aria-controls="collapse-1-1">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapse-1-1" class="collapse show" aria-labelledby="heading-1-1" data-parent="#accordion-1">
      <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-1-2">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse-1-2" aria-expanded="false" aria-controls="collapse-1-2">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapse-1-2" class="collapse" aria-labelledby="heading-1-2" data-parent="#accordion-1">
      <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-1-3">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse-1-3" aria-expanded="false" aria-controls="collapse-1-3">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapse-1-3" class="collapse" aria-labelledby="heading-1-3" data-parent="#accordion-1">
      <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

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum voluptates doloribus aliquid ipsam voluptatum, voluptate obcaecati, libero officia suscipit alias a repellendus! Eius eligendi perspiciatis autem, ad itaque facilis saepe.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id asperiores sint exercitationem, ipsam dolore ex omnis, dolores provident necessitatibus eveniet, facilis nemo dignissimos delectus aliquam fugiat explicabo saepe quae molestiae.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum magni eius ea natus quia aperiam doloremque, minus ipsa ipsum provident vel itaque, qui quibusdam excepturi fugiat quasi, minima, odit autem?

<div class="accordion accordion-minimal" id="accordion-2">
  <div class="card">
    <div class="card-header" id="heading-2-1">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse-2-1" aria-expanded="true" aria-controls="collapse-2-1">
          Collapsible Group Item #1
        </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. Dolorum voluptates doloribus aliquid ipsam voluptatum, voluptate obcaecati, libero officia suscipit alias a repellendus! Eius eligendi perspiciatis autem, ad itaque facilis saepe.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="heading-2-2">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse-2-2" aria-expanded="false" aria-controls="collapse-2-2">
          Collapsible Group Item #2
        </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. Id asperiores sint exercitationem, ipsam dolore ex omnis, dolores provident necessitatibus eveniet, facilis nemo dignissimos delectus aliquam fugiat explicabo saepe quae molestiae.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="heading-2-3">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse-2-3" aria-expanded="false" aria-controls="collapse-2-3">
          Collapsible Group Item #3
        </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. Nostrum magni eius ea natus quia aperiam doloremque, minus ipsa ipsum provident vel itaque, qui quibusdam excepturi fugiat quasi, minima, odit autem?</p>
      </div>
    </div>
  </div>
</div>