Components

Accordion

Root .wckd-accordion with .column rows; each row is button.accordion-toggle immediately followed by .accordion-content. Optional data-show-filter / data-show-expand-all on the root add a toolbar, wired by wckd-ui.js.

Jump to:

Download & setup

Download WCKD UI Style guide

Load the kit from Get Started; use the style guide for utilities and tokens while wiring this component.

Default implementation

Basic accordion

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

HTML-first system for fast pages.

Markup

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

Configuration options

Each variant keeps the same markup contract as the default; add only the classes or attributes named in the heading.

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" type="button">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" type="button">Account access</button><div class="accordion-content">...</div></div>
  <div class="column"><button class="accordion-toggle" type="button">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" type="button">Account access</button><div class="accordion-content">...</div></div>
  <div class="column"><button class="accordion-toggle" type="button">Billing</button><div class="accordion-content">...</div></div>
</div>

When to use

  • FAQs, policy sections, and stacked settings where only one or a few panels open at a time.
  • Docs sidebars paired with optional filter + expand-all toolbars.

Implementation notes

  • Use button elements for toggles so keyboard and screen readers get proper semantics.
  • Keep each toggle immediately followed by its content panel.

Developer checklist

  • Use <button type="button" class="accordion-toggle"> per row.
  • Keep .accordion-content as the immediate next sibling of its toggle.
  • Optional: set data-show-filter, data-show-expand-all, or both on .wckd-accordion; do not invent other attribute names.
  • Smoke-test open/close on mobile after adding media inside panels.

← All components