Components

Collapsible toggle

Inline “read more” pattern: wckdCollapsibleToggles in wckd-ui.js flips open-toggle on the wrapper around .wckd-toggle + .wckd-toggle-content. CSS in wckd-ui-components.css clips height until open; optional data-text swaps button labels and keeps aria-expanded in sync.

Jump to:

Download & setup

Download WCKD UI Style guide

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 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

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

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