Accordion

Usage Guidelines

Accordions are expanding panels of related content or controls. Use them as a tool to organize content where space is limited, such as in an off-canvas panel or on mobile devices.

Do

  • Label sections clearly and concisely
  • Use for secondary controls or information
  • Place inside another component, like a form or off-canvas panel

Don't

  • Use for navigation controls
  • Use for large blocks of content or extensive sets of controls

Basic accordion

Tacos selvage bushwick, craft beer bitters small batch keffiyeh deep v. Kale chips actually listicle neutra, squid occupy brooklyn raw denim tacos lumberjack cardigan.

Crucifix kale chips mumblecore ramps keffiyeh authentic. Plaid schlitz vinyl, yr chartreuse shoreditch chambray occupy mlkshk narwhal try-hard letterpress williamsburg church-key cardigan.

Occupy leggings offal, craft beer austin tumblr retro plaid hashtag umami kombucha mustache. Raw denim gochujang portland brooklyn, butcher fixie whatever pinterest vegan organic intelligentsia VHS.

<div class="accordion" id="accordion-demo-light" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="accordion-header" id="accordion-head-1" role="tab" data-toggle="collapse" data-target="#accordion-sect-1" data-parent="#accordion-demo-light" aria-expanded="true" aria-controls="accordion-sect-1">
      <h3 class="accordion-title">Section 1</h3>
    </div>
    <div class="accordion-content collapse show" id="accordion-sect-1" role="tabpanel" aria-labeledby="accordion-head-1">
      <div class="accordion-block">
        <p>Tacos selvage bushwick, craft beer bitters small batch keffiyeh deep v. Kale chips actually listicle neutra, squid occupy brooklyn raw denim tacos lumberjack cardigan.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="accordion-header collapsed" id="accordion-head-2" role="tab" data-toggle="collapse" data-target="#accordion-sect-2" data-parent="#accordion-demo-light" aria-expanded="false" aria-controls="accordion-sect-2">
      <h3 class="accordion-title">Section 2</h3>
    </div>
    <div class="accordion-content collapse" id="accordion-sect-2" role="tabpanel" aria-labeledby="accordion-head-2">
      <div class="accordion-block">
        <p>Crucifix kale chips mumblecore ramps keffiyeh authentic. Plaid schlitz vinyl, yr chartreuse shoreditch chambray occupy mlkshk narwhal try-hard letterpress williamsburg church-key cardigan.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="accordion-header collapsed" id="accordion-head-3" role="tab" data-toggle="collapse" data-target="#accordion-sect-3" data-parent="#accordion-demo-light" aria-expanded="false" aria-controls="accordion-sect-3">
      <h3 class="accordion-title">Section 3</h3>
    </div>
    <div class="accordion-content collapse" id="accordion-sect-3" role="tabpanel" aria-labeledby="accordion-head-3">
      <div class="accordion-block">
        <p>Occupy leggings offal, craft beer austin tumblr retro plaid hashtag umami kombucha mustache. Raw denim gochujang portland brooklyn, butcher fixie whatever pinterest vegan organic intelligentsia VHS.</p>
      </div>
    </div>
  </div>
</div>