# Collapsible

A trigger that shows and hides a region, with its height animated.

```ehtml Example
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@elements/ui/collapsible";
import { Button } from "@elements/ui/button";
import { Icon } from "@elements/ui/icon";

<Collapsible>
  <div class="row">
    <h4>Order #4189</h4>
    <CollapsibleTrigger>
      <Button variant="ghost" icon size="sm" label="Toggle details"><Icon name="chevrons-up-down" /></Button>
    </CollapsibleTrigger>
  </div>
  <p>Status: Shipped</p>
  <CollapsibleContent>
    <p>Shipping address and items</p>
  </CollapsibleContent>
</Collapsible>
```

## Parts

| Part | What it is |
|---|---|
| `Collapsible` | The root. Owns open; the trigger and content parts can sit anywhere inside it. |
| `CollapsibleTrigger` | Wraps the caller's button. Its first element gets aria-expanded, aria-controls and data-state; a click inside toggles. Plain text gets a native button. |
| `CollapsibleContent` | The region that shows and hides. Hidden when closed; its height animates. |
| `.collapsible-chevron` | Put on an `<Icon>` in the trigger to turn it with the state (is-right for a chevron-right that turns down). |

## Attributes

### Collapsible

| Attribute | Type | Default | Description |
|---|---|---|---|
| `open` | `boolean` (two-way) | `false` | Whether the content shows. Omit for uncontrolled; bind it to control it. |
| `disabled` | `boolean` | `false` | The trigger is disabled and clicks do nothing. |
| `onOpenChange` | `(open: boolean, details: DisclosureDetails) => void` | `() => {}` | Called when the trigger toggles it, before the change, with details second (reason, event, trigger, cancel(), isCanceled; reason trigger-press). details.cancel() keeps it as it was. Not called for changes the caller makes. |
| `class` | `string` | `""` | Extra classes on the root. |

### CollapsibleContent

| Attribute | Type | Default | Description |
|---|---|---|---|
| `hiddenUntilFound` | `boolean` | `false` | Closed content stays searchable: find in page, or a link to its text, opens it. |
| `class` | `string` | `""` | Extra classes on the content. |

## Slots

| Slot | Part | Content |
|---|---|---|
| `default` | `Collapsible` | Any markup, including the trigger and content parts. |
| `default` | `CollapsibleTrigger` | The trigger element: a `<Button>` or `<button>`, or plain text, which gets a native button. |
| `default` | `CollapsibleContent` | What shows when open. |

## Keyboard

| Keys | Action |
|---|---|
| `Space` | Opens or closes it (on the trigger). |
| `Enter` | Opens or closes it (on the trigger). |

## Data attributes

| Attribute | Values | On | Description |
|---|---|---|---|
| `data-state` | `"open" \| "closed"` | root, trigger, content |  |
| `data-disabled` | present when disabled | root, trigger, content |  |
| `data-open / data-closed` | present while open / closed | root, content |  |
| `data-panel-open` | present while the content is open | trigger |  |
| `data-animating` | present while the height animates | content |  |
| `data-starting-style / data-ending-style` | the first frames of an open / the whole close | root, content |  |
| `--content-height` | px | content | Measured height, for custom keyframes |
| `--content-width` | px | content | Measured width |

## Accessibility

- Follows the WAI-ARIA disclosure pattern: the trigger has aria-expanded and aria-controls pointing at the content.
- Closed content is hidden, so its controls leave the tab order and screen readers skip it.
- The server renders a closed collapsible with its content already hidden, so nothing moves when the page attaches.

## See also

- [Button](button): A button or a link that looks like one, in six variants and four sizes.
- [Icon](icon): An inline stroke icon from the set the templates draw their own controls with, sized in pixels and colored by the text around it.
- [Accordion](accordion): A stack of headings that each show and hide a panel, one or several at a time.
- [Tabs](tabs): Layered panels, one shown at a time, chosen from a list of tabs.
- [Breadcrumb](breadcrumb): The path to the current page as a trail of links, composed from parts or built from a list.
- [Pagination](pagination): Page numbers with previous and next, from a page count or composed from parts.