Collapsible

An interactive component that expands and collapses to show or hide content.

Interactive Requires: veritheme.js JS init: automatic

Default

A basic collapsible with a trigger button and expandable content area.

html

@peduarte starred 3 repositories

@radix-ui/primitives

@radix-ui/colors

@stitches/react

<div data-collapsible>
  <button data-collapsible-trigger>Toggle</button>
  <div data-collapsible-content class="vt-hidden">
    Hidden content here.
  </div>
</div>

With Animation

Content expands and collapses with a smooth height transition.

html

@peduarte starred 3 repositories

@radix-ui/primitives

@radix-ui/colors

@stitches/react

<div data-collapsible data-collapsible-animated>
  <button data-collapsible-trigger>...</button>
  <div data-collapsible-content class="vt-overflow-hidden vt-transition-all vt-duration-300">
    ...
  </div>
</div>

Nested

A collapsible inside another collapsible for hierarchical content like file trees.

html

Project Files

src/

index.ts

utils.ts

styles.css

package.json

tsconfig.json

<div data-collapsible>
  <button data-collapsible-trigger>...</button>
  <div data-collapsible-content class="vt-hidden">
    <div data-collapsible>
      <button data-collapsible-trigger>...</button>
      <div data-collapsible-content class="vt-hidden">
        Nested content
      </div>
    </div>
  </div>
</div>

Controlled

Collapsibles with text-based triggers that toggle between "Show more" and "Show less".

html

Collapsible components are useful for toggling the visibility of content. They can be used to create expandable sections, FAQs, and more.

This pattern is commonly used in settings panels, sidebars, and content-heavy pages where you want to reduce visual clutter while keeping information accessible.

You can also use collapsible components to progressively disclose information to users as they need it.

Progressive disclosure helps reduce cognitive load by showing only the most essential information upfront, with additional details available on demand.

<div data-collapsible data-collapsible-open>
  <p>Content preview...</p>
  <div data-collapsible-content>
    <p>Additional content...</p>
  </div>
  <button data-collapsible-trigger>
    <span data-collapsible-label-collapse>Show less</span>
    <span data-collapsible-label-expand class="vt-hidden">Show more</span>
  </button>
</div>

Guidelines

Progressively disclose secondary content behind a trigger; keep essential information always visible.

Progressive disclosure keeps the interface tidy.

Extra detail appears only when the reader asks for it.

Hide only secondary detail behind a Show more trigger.

Account

Payment failed — action required

Don't

Don't bury critical alerts inside a collapsed section.

API Reference

All CSS classes and data attributes.

Class	Type	Description
`data-collapsible`	Data	Root hook — the JS bundle wires trigger and content
`data-collapsible-trigger`	Data	Click target that toggles the section
`data-collapsible-content`	Data	Collapsible region — height animates open/closed
`data-collapsible-open`	State	Present on the root while expanded
`data-collapsible-icon`	Data	Chevron that rotates with the open state

Accessibility

Keyboard and screen reader support.

Feature	Details
Trigger	The trigger is a button with aria-expanded reflecting the open state
Region	Content is referenced via aria-controls and hidden from the tab order when closed
Keyboard	Enter and Space toggle; focus stays on the trigger