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. Expand/collapse plays a built-in drop-in/drop-out animation, retunable via --acc-panel-enter-anim-name/-exit-anim-name and friends.

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>