Accordion

Accordions are elements that help you organize and navigate multiple regions of content within a single container. They can be used for switching between items in the container based on which title the user has clicked. Our accordion is based on the Bootstrap accordion.

Anatomy

Heading
Collapse / Expand
Body
Card

Example

Coded example

Some placeholder content for the first accordion panel. This panel is hidden by default.

Some placeholder content for the second accordion panel. This panel is hidden by default.

And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.

Code snippet

									
<div class="accordion" id="accordionExample">
  <div class="card mb-18">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          Accordion Title One<i class="fa-light fa-angle-down"></i>
        </button>
      </h2>
    </div>
    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the first accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
  <div class="card mb-18">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Title Two<i class="fa-light fa-angle-down"></i>
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the second accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
  <div class="card mb-18">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Accordion Title Three<i class="fa-light fa-angle-down"></i>
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
</div>

									
None required

Figma prototype

Usage guide

Dos and don'ts

Use an accordion to display passages of text.

See an overview of multiple, related sections of content.

To focus users attention to a certain piece of content.

Don't use to contain applications. Use a stepper component.

Don’t hide essential information in an accordion as all users may not know how to use one.

Don’t overload an accordion with content as it can result in slow page loads.