Accordion

The accordion (.accordion) is a vertical stack of collapsible .accordion-item panels, each with a clickable heading that expands or collapses its content. By default an accordion is single-open and collapsible; both defaults can be overridden with presence-only JS-config classes.

General settings content.

<div class="accordion accordion-outline">
  <div class="accordion-item">
    <h3 class="accordion-heading">
      <button type="button" class="accordion-trigger action-toggle" id="trigger-general"
              aria-expanded="true" aria-controls="panel-general">
        <span class="accordion-title">General</span>
        <span class="accordion-icon" aria-hidden="true">▾</span>
      </button>
    </h3>
    <div class="accordion-panel" id="panel-general">
      <div class="accordion-content">General settings content.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-heading">
      <button type="button" class="accordion-trigger action-toggle" id="trigger-billing"
              aria-expanded="false" aria-controls="panel-billing">
        <span class="accordion-title">Billing</span>
        <span class="accordion-icon" aria-hidden="true">▾</span>
      </button>
    </h3>
    <div class="accordion-panel" id="panel-billing" hidden>
      <div class="accordion-content">Billing settings content.</div>
    </div>
  </div>
</div>