# Collapsible

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

URL: https://apogee.avaui.dev/docs/collapsible
Last updated: 2026-10-16

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

Last updated October 16, 2026

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

## Add

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

```astro
---
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°.

```astro
<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):

```astro
<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):

```astro
<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.

](https://apogee.avaui.dev/docs/accordion)[

ExpandableLong content clamped to a preview height with a fade and a "Show more" toggle. Zero JS.

](https://apogee.avaui.dev/docs/expandable)[

ContentToggleShows one keyed child at a time and slides between them, for pagers and step content.

](https://apogee.avaui.dev/docs/content-toggle)