Components

Collapsible toggle

Parent wraps button.wckd-toggle + sibling .wckd-toggle-content; wckd-ui.js toggles open-toggle on the parent. Optional data-text on a button swaps labels and syncs aria-expanded.

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 disclosure

Place .wckd-toggle and a direct sibling .wckd-toggle-content inside the same parent. The script toggles open-toggle on that parent (not on the document body).

Supplemental text appears here. Add .open-toggle to the parent on the server if this block should start expanded.

Markup

<div>
  <button class="wckd-toggle" type="button" aria-expanded="false">Read more</button>
  <div class="wckd-toggle-content">
    <p>Revealed content</p>
  </div>
</div>

Configuration options

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

Button label swap

When the trigger is a <button> and you set data-text, the label swaps between the default inner HTML and that attribute value when open.

Extra context for list items or table rows. Same DOM contract as the basic example.

Markup

<div>
  <button class="wckd-toggle" type="button" data-text="Show less">Show more</button>
  <div class="wckd-toggle-content">...</div>
</div>

When to use

  • “Read more” on long intros, product specs, and legal summary rows.
  • Show/hide for secondary filters or advanced fields without a modal.

Implementation notes

  • Requires wckd-ui.js with wckdCollapsibleToggles() in the bootstrap. Each .wckd-toggle is bound once via data-wckd-toggle-bound.
  • The parent of .wckd-toggle must be the same element whose class list receives open-toggle, put the button and content under one wrapper div or section.
  • Related utilities: .fade-to-white and .wckd-toggle.peekaboo in wckd-ui.css for gradient masks and footnote-style links (see style guide) when you are not using the full slide-open panel.

Developer checklist

  • Prefer <button type="button"> for the trigger so the control is keyboard-activable and can carry aria-expanded once wired.
  • If content must be in the open state for non-JS clients, pre-apply open-toggle to the parent and set aria-expanded="true".

← All components