Accordion

Accordion component allows you to toggle content on your pages with a few classes.

Example

Displays collapsible content panels for presenting information in a limited amount of space.

Collapsible Group Item #1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. 
<div class="accordion" id="accordion-1">
  <div class="card">
    <h6 class="card-title">
      <a data-toggle="collapse" href="#collapse-1-1">Collapsible Group Item #1</a>
    </h6>

    <div id="collapse-1-1" class="collapse show" data-parent="#accordion-1">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
      </div>
    </div>
  </div>


  <div class="card">
    <h6 class="card-title">
      <a data-toggle="collapse" href="#collapse-1-2" class="collapsed">Collapsible Group Item #2</a>
    </h6>

    <div id="collapse-1-2" class="collapse" data-parent="#accordion-1">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
      </div>
    </div>
  </div>


  <div class="card">
    <h6 class="card-title">
      <a data-toggle="collapse" href="#collapse-1-3" class="collapsed">Collapsible Group Item #3</a>
    </h6>

    <div id="collapse-1-3" class="collapse" data-parent="#accordion-1">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
      </div>
    </div>
  </div>
</div>
Markup
Copy