Collapsible

Style native disclosure groups without replacing details. CSS only

Choosing between components

One expandable region or a whole stack of them: both are <details> with .ui-collapsible, so there is no second component to choose. Give every <details> in a stack the same name to get an accordion where only one panel is open at a time — the browser closes the previous one, so no script is involved. Omit name and the panels open independently.

Collapsible

Copy this markup

<div>
  <details class="ui-collapsible" name="catalog-collapsible" open>
    <summary>What ships?</summary>
    <div>
      <p>CSS, explicit element definitions, and public types.</p>
    </div>
  </details>
  <details class="ui-collapsible" name="catalog-collapsible">
    <summary>Does it need JavaScript?</summary>
    <div>
      <p>No. Native details and summary own the open state, the keyboard, and find-in-page.</p>
    </div>
  </details>
</div>

Install

Styles and registration

import '@timelessui/components/css/tokens.css'
import '@timelessui/components/css/core/collapsible.css'
import '@timelessui/components/css/themes/atmosphere/tokens.css'
import '@timelessui/components/css/themes/atmosphere/collapsible.css'

Attributes

Every value below is implemented by the stylesheets this component ships. Boolean attributes are presence-based: author the attribute with no value, or omit it.

Attribute	Values	Default	Description
data-ui-density	compact · normal	normal	Summary and content padding.

Styling

Root identity: ui-collapsible. Required stylesheets: tokens.css, core/collapsible.css, themes/atmosphere/tokens.css, themes/atmosphere/collapsible.css.

Set these custom properties to restyle the component:

Custom property	Controls
--ui-collapsible-line	Divider color between rows.
--ui-collapsible-trigger-min-block-size	Minimum summary height.
--ui-collapsible-trigger-padding-block	Block padding inside the summary.
--ui-collapsible-trigger-gap	Gap between the summary text and the indicator.
--ui-collapsible-panel-padding-block-end	Block-end padding below the panel.
--ui-collapsible-icon-size	Size of the chevron indicator.
--ui-collapsible-duration	Indicator and panel transition duration.

Design tokens this component reads (10)

These are global Atmosphere tokens. Change them once at the theme level rather than per component.

--ui-accent · --ui-duration-fast · --ui-ease-standard · --ui-fg · --ui-fg-muted · --ui-focus · --ui-line · --ui-space-3 · --ui-space-4 · --ui-space-5

Accessibility

Keep the native elements, roles, and relationships shown in the example. Timeless adds only the state and keyboard coordination the platform does not already provide, and it never supplies your accessible names — those depend on your content.

Follows the Disclosure pattern from the ARIA Authoring Practices Guide.

Every key comes from native <details> and <summary>: Enter and Space toggle, Tab reaches the summary, and find-in-page opens a closed panel to reveal a match. Timeless adds no script and no ARIA, because the platform already exposes the button, its expanded state, and the region it controls. For an accordion where only one panel is open at a time, give every <details> in the stack the same name; the browser closes the previously open one, with no JavaScript involved.

Before JavaScript runs

This primitive is CSS only. There is nothing to register and nothing to wait for.

More examples

Open Collapsible in StoryLite for variants, controls, and manual testing.