Accordion

Expandable panels for FAQs, docs, and stacked content sections with optional filter and expand-all controls.

Jump to:

Download & setup

Start with the package download and setup steps in Get Started, then use the style guide for utility and token references while implementing this component.

Default implementation

Basic accordion

Each row pairs an .accordion-toggle button with an .accordion-content panel.

HTML-first system for fast pages.

Markup

<div class="wckd-accordion columns">
  <div class="column">
    <button class="accordion-toggle">What is WCKD UI?</button>
    <div class="accordion-content"><p>HTML-first system for fast pages.</p></div>
  </div>
</div>

Configuration options

Start from the default implementation, then apply one of these intent-driven variations based on your content and interaction goals.

With open-all toggle

Toolbar shows expand/collapse-all only. Omit the filter field. Use data-show-expand-all on the accordion root.

Utilities, components, and progressive JavaScript behaviours.

Most teams can compose polished pages in hours, not weeks.

Yes. It is HTML-first and framework-agnostic by design.

Markup

<div class="wckd-accordion columns" data-show-expand-all>
  <div class="column"><button class="accordion-toggle">Deployment target</button><div class="accordion-content"><p>Deploy on any PHP host with static assets.</p></div></div>
</div>

With filter

Toolbar shows the filter field only. Omit expand/collapse-all. Use data-show-filter on the accordion root.

Reset passwords, MFA recovery, and login troubleshooting.

Invoices, taxes, and subscription lifecycle details.

Webhooks, API keys, and connector setup steps.

Markup

<div class="wckd-accordion columns count-1" data-show-filter>
  <div class="column"><button class="accordion-toggle">Account access</button><div class="accordion-content">...</div></div>
  <div class="column"><button class="accordion-toggle">Billing</button><div class="accordion-content">...</div></div>
</div>

With filter + open-all toggle

Toolbar lists both the filter field and expand/collapse-all. Set data-show-filter and data-show-expand-all together.

Reset passwords, MFA recovery, and login troubleshooting.

Invoices, taxes, and subscription lifecycle details.

Webhooks, API keys, and connector setup steps.

Markup

<div class="wckd-accordion columns count-1" data-show-filter data-show-expand-all>
  <div class="column"><button class="accordion-toggle">Account access</button><div class="accordion-content">...</div></div>
  <div class="column"><button class="accordion-toggle">Billing</button><div class="accordion-content">...</div></div>
</div>

When to use

Fits the flows described in the examples here when you can match the same structure.
Start from the default markup, then add layout, spacing, and surfaces with style guide utilities.
Narrow the viewport: many components change layout (stack, compact nav, or accordion) at the kit breakpoints.

Implementation notes

Use button elements for toggles so keyboard and screen readers get proper semantics.
Keep each toggle immediately followed by its content panel for simpler behaviour.
If content includes media, test collapsed/expanded height transitions on mobile.

Developer checklist

Confirm wckd-ui.css and wckd-ui-components.css (and the wckd-ui.js bootstrap from Get Started) are loaded when this pattern uses interactivity.
Keep the documented class names and DOM shape so the default wckd-ui.js bootstrap (window.WCKD_BOOTSTRAP / window.WCKD_COMPONENTS) can initialise the right module for the root.
Re-test keyboard, focus, and at least one small viewport after custom CSS or extra interactive children.

← All components