Collapsible

A single show/hide region, built on native <details>. Zero JS.

Last updated

Details

What’s included? Everything in the Pro plan, plus priority support and SSO.

Show code
<Collapsible>
<span slot="trigger">What's included?</span>
Everything in the Pro plan, plus priority support and SSO.
</Collapsible>

Add

npx @ava-ui/apogee add collapsible

No Apogee dependencies. Uses @lucide/astro internally (ChevronDown) for the trigger icon — no icon import needed in your usage.

Usage

---
import Collapsible from '@/components/apogee/Collapsible/Collapsible.astro'
---
<Collapsible>
  <span slot="trigger">What's included?</span>
  Everything in the Pro plan, plus priority support and SSO.
</Collapsible>

Anatomy

  • Trigger — the <summary>, from slot="trigger" (defaults to “Details” if omitted).
  • Content — the revealed region, the default slot.

API

@composable — exposed to Content Editors in AVA. Any other native <details> attribute passes through.

Prop Type Default Description
open boolean false Initial open state (native open attribute).
class string — Extra classes on the root <details>, merged last.

States

  • Closed — default; the content row is collapsed and hidden (visibility: hidden), so nothing inside it takes focus or is read out.
  • Open — the content row animates from 0fr to 1fr (in every browser engine, Safari included); the trigger’s chevron rotates 180°.
Details

Open by default This one starts expanded.

Details

Closed by default This one starts collapsed.

Show code
<Collapsible open>
<span slot="trigger">Open by default</span>
This one starts expanded.
</Collapsible>
<Collapsible>
<span slot="trigger">Closed by default</span>
This one starts collapsed.
</Collapsible>

Examples

Stacked, independent regions (each opens on its own):

Details

Shipping Ships in 3–5 business days.

Details

Returns Free returns within 30 days.

Show code
<Collapsible>
<span slot="trigger">Shipping</span>
Ships in 3–5 business days.
</Collapsible>
<Collapsible>
<span slot="trigger">Returns</span>
Free returns within 30 days.
</Collapsible>

Default trigger text (no trigger slot):

<Collapsible>More detail below.</Collapsible>

Accessibility

Key Action
Tab Moves focus to the summary.
Enter Space Opens or closes the region.
  • Native <details> / <summary> — keyboard support, expanded/collapsed state, and disclosure semantics come from the browser for free. No ARIA needed.
  • Focus — a visible focus-visible ring on the summary.
  • The chevron icon is aria-hidden; the browser’s own details marker is hidden via CSS so it isn’t announced twice.
  • The open/close animation respects prefers-reduced-motion.
  • No JS: works identically — <details> is a zero-JS element, so nothing changes with scripts off.

Tokens

Token Used for
--foreground-neutral Trigger label colour
--foreground-neutral-faded Chevron icon; content text
--outline-color-focus Focus ring
--duration-medium / --ease-standard Chevron rotate transition
--duration-slow Content open/close transition

Do / Don’t

  • Do use Collapsible for one independent show/hide region (FAQ entry, optional detail).
  • Do write the trigger label so it stands alone, collapsed or expanded.
  • Don’t use Collapsible for a set of mutually exclusive panels — use Accordion for grouped, single-open sections.
  • Don’t put a page’s primary content behind a Collapsible — it’s for optional detail, not gatekeeping.

Content

  • Trigger label is a specific phrase describing what’s revealed — not a generic “Click here” or “Show more”.
  • No ending punctuation on the trigger label.

Related

AccordionA stack of collapsible disclosure panels; expand one to read it, collapse it to reclaim space.
ExpandableLong content clamped to a preview height with a fade and a "Show more" toggle. Zero JS.
ContentToggleShows one keyed child at a time and slides between them, for pagers and step content.