Early Access

Toggle

Show or hide related content interactively. By clicking a button, the associated content smoothly expands or collapses, helping keep interfaces clean and user-friendly.

Default Toggle (directly adjacent content)

<div>
  <button class="wckd-toggle" data-text="Hide Details">Show Details</button>
  <div class="wckd-toggle-content">Content 1</div>
</div>

Content 1

Targeted Toggle (uses data-target)

<div>
  <button class="wckd-toggle" data-target="custom-id" data-text="Less">More</button>
</div>
<div id="custom-id" class="wckd-toggle-content">Content 3</div>

Content 3

Toggle HTML Structure

section
- div
  - button.wckd-toggle
  - div.wckd-toggle-content

Toggle Options

data-text: Defines the alternate text to display on the toggle button after it has been clicked.
data-target: Points to a specific element (by ID) that should be toggled open/closed.

Updates

June 24, 2025: v1.1.0 : Added: Support for data-target attribute on .wckd-toggle buttons.
- When data-target is set, the toggle controls the element with that ID instead of the default adjacent .wckd-toggle-content.
- If data-target is missing, the toggle falls back to toggling the next sibling .wckd-toggle-content within the same container.