Accordion

The accordion stacks sections that expand and collapse in place, opening one at a time unless told otherwise, like an FAQ. For a single independent section, use a collapsible.

<div class="accordion">
  <div class="accordion-item">
    <h3>
      <button id="acc-shipping" class="accordion-trigger" aria-expanded="true">
        What are your shipping options?
      </button>
    </h3>
    <div class="accordion-panel expanded" data-sp-toggle="#acc-shipping">
      <div class="accordion-content">
        We offer standard (5-7 days), express (2-3 days), and overnight
        shipping. Free shipping on international orders.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h3>
      <button id="acc-returns" class="accordion-trigger">
        What is your return policy?
      </button>
    </h3>
    <div class="accordion-panel" data-sp-toggle="#acc-returns">
      <div class="accordion-content">
        Returns accepted within 30 days. Items must be unused and in original
        packaging. Refunds processed within 5-7 business days.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h3>
      <button id="acc-support" class="accordion-trigger">
        How can I contact customer support?
      </button>
    </h3>
    <div class="accordion-panel" data-sp-toggle="#acc-support">
      <div class="accordion-content">
        Reach us via email, live chat, or phone. We respond within 24 hours
        during business days.
      </div>
    </div>
  </div>
</div>

Usage

Add the accordion class to the wrapper and compose each section from an item, a trigger, and a panel; the panel points at its trigger with data-sp-toggle. The rotating chevron is added to every trigger automatically (a trailing svg you author takes its place), and opening a section closes the others. Author expanded on a panel and aria-expanded="true" on its trigger to start open.

Class	Description
`accordion`	Add to the wrapper; carries the `data-sp-*` options
`accordion-item`	Add to each section; draws the divider to the next one
`accordion-trigger`	Add to the `<button>`, wrapped in a heading
`accordion-panel`	Add to the collapsing element; `expanded` starts it open
`accordion-content`	Add to the inner wrapper holding the section's content

<div class="accordion">
  <div class="accordion-item">
    <h3>
      <button id="section-1" class="accordion-trigger">Section title</button>
    </h3>
    <div class="accordion-panel" data-sp-toggle="#section-1">
      <div class="accordion-content">Section content.</div>
    </div>
  </div>
</div>

Examples

Multiple

Add data-sp-multiple and sections open independently.

<div class="accordion" data-sp-multiple>
  <div class="accordion-item">
    <h3>
      <button
        id="acc-notifications"
        class="accordion-trigger"
        aria-expanded="true"
      >
        Notification Settings
      </button>
    </h3>
    <div class="accordion-panel expanded" data-sp-toggle="#acc-notifications">
      <div class="accordion-content">
        Choose which updates you want to receive and how: email, push, or in-app
        notifications.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h3>
      <button id="acc-privacy" class="accordion-trigger">
        Privacy & Security
      </button>
    </h3>
    <div class="accordion-panel" data-sp-toggle="#acc-privacy">
      <div class="accordion-content">
        Control who can see your profile and activity, and manage two-factor
        authentication.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h3>
      <button id="acc-billing-m" class="accordion-trigger">
        Billing & Subscription
      </button>
    </h3>
    <div class="accordion-panel" data-sp-toggle="#acc-billing-m">
      <div class="accordion-content">
        Update your payment method, view invoices, and manage your subscription
        plan.
      </div>
    </div>
  </div>
</div>

Disabled

Add disabled to a trigger to lock its section.

<div class="accordion">
  <div class="accordion-item">
    <h3>
      <button id="acc-history" class="accordion-trigger">
        Can I access my account history?
      </button>
    </h3>
    <div class="accordion-panel" data-sp-toggle="#acc-history">
      <div class="accordion-content">
        Yes, you can view your complete account history including all
        transactions, plan changes, and support tickets in the Account History
        section of your dashboard.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h3>
      <button id="acc-premium" class="accordion-trigger" disabled>
        Premium feature information
      </button>
    </h3>
    <div class="accordion-panel" data-sp-toggle="#acc-premium">
      <div class="accordion-content">
        This section contains information about premium features. Upgrade your
        plan to access this content.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h3>
      <button id="acc-email" class="accordion-trigger">
        How do I update my email address?
      </button>
    </h3>
    <div class="accordion-panel" data-sp-toggle="#acc-email">
      <div class="accordion-content">
        You can update your email address in your account settings. You'll
        receive a verification email at your new address to confirm the change.
      </div>
    </div>
  </div>
</div>

Borders

Wrap the accordion in a border and inset the items.

<div class="accordion rounded-lg border">
  <div class="accordion-item px-4">
    <h3>
      <button id="acc-billing-b" class="accordion-trigger" aria-expanded="true">
        How does billing work?
      </button>
    </h3>
    <div class="accordion-panel expanded" data-sp-toggle="#acc-billing-b">
      <div class="accordion-content">
        We bill monthly or annually, with a discount for annual plans. Your card
        is charged at the start of each cycle.
      </div>
    </div>
  </div>
  <div class="accordion-item px-4">
    <h3>
      <button id="acc-security-b" class="accordion-trigger">
        Is my data secure?
      </button>
    </h3>
    <div class="accordion-panel" data-sp-toggle="#acc-security-b">
      <div class="accordion-content">
        All data is encrypted in transit and at rest, and we run independent
        security audits every year.
      </div>
    </div>
  </div>
  <div class="accordion-item px-4">
    <h3>
      <button id="acc-integration-b" class="accordion-trigger">
        What integrations do you support?
      </button>
    </h3>
    <div class="accordion-panel" data-sp-toggle="#acc-integration-b">
      <div class="accordion-content">
        We integrate with the major productivity, analytics, and communication
        tools your team already uses.
      </div>
    </div>
  </div>
</div>

Card

An accordion slots into a card for a framed FAQ.

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Subscription &amp; Billing</h3>
    <p class="card-description">
      Common questions about your account, plans, payments and cancellations.
    </p>
  </div>
  <div class="card-content">
    <div class="accordion">
      <div class="accordion-item">
        <h3>
          <button id="acc-plans" class="accordion-trigger" aria-expanded="true">
            What subscription plans do you offer?
          </button>
        </h3>
        <div class="accordion-panel expanded" data-sp-toggle="#acc-plans">
          <div class="accordion-content">
            We offer Free, Pro, and Enterprise plans. Each tier adds more seats,
            storage, and support options.
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <h3>
          <button id="acc-billing-c" class="accordion-trigger">
            How does billing work?
          </button>
        </h3>
        <div class="accordion-panel" data-sp-toggle="#acc-billing-c">
          <div class="accordion-content">
            We bill monthly or annually, with a discount for annual plans. Your
            card is charged at the start of each cycle.
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <h3>
          <button id="acc-cancel" class="accordion-trigger">
            How do I cancel my subscription?
          </button>
        </h3>
        <div class="accordion-panel" data-sp-toggle="#acc-cancel">
          <div class="accordion-content">
            Cancel anytime from your billing settings. Your plan stays active
            until the end of the paid period.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Options

Accordion

Set each option with its own data-sp-* attribute on the accordion element.

Attribute	Values	Default
`data-sp-multiple`	Boolean	`false`

Each accordion-panel points at its trigger with its own data-sp-toggle attribute.

JavaScript

Events

The panels are collapsibles, so their lifecycle events fire on each panel and bubble; before* events are cancelable.

Event	When
`sp-beforeexpand`	Before expanding (cancelable)
`sp-expand`	Expanding
`sp-expanded`	Expanded and settled
`sp-beforecollapse`	Before collapsing (cancelable)
`sp-collapse`	Collapsing
`sp-collapsed`	Collapsed and settled

accordion.addEventListener("sp-expand", (e) => {
  console.log("opening", e.target.id);
});

Methods

Each panel is a collapsible; drive one with sp.collapsible(panel):

Method	Description
`expand()`	Expand the panel (closing siblings unless multiple)
`collapse()`	Collapse the panel
`toggle()`	Expand if collapsed, else collapse

sp.collapsible(document.querySelector("#section-1-panel")).expand();