# Collapsible

Host: Radix UI. Path: keyframes. Preset: `collapse`. Built against [radix-ui 1.6.7](https://www.npmjs.com/package/radix-ui/v/1.6.7).

The only case opacity cannot carry, because the layout below has to move. A second keyframe track collapses a grid row from 1fr to 0fr, so nothing has to measure the panel and nothing depends on a Chromium-only property.

The page this file mirrors mounts the component twice, once with the attribute and once without, so the only difference between the two is the library.

Upstream documentation: [Radix UI documentation](https://www.radix-ui.com/primitives/docs/components/collapsible)

The same component in other hosts: [Base UI](/base-ui/collapsible.md).

## Where the attribute goes

The parts this demo composes, and the value each one carries. Everything inside an animated part is that part's content, so the tree stops there.

```text
Collapsible.Root
  Collapsible.Trigger
  Collapsible.Content  data-motion="collapse"
```

## How the match works

| Step | Value |
| --- | --- |
| host writes | `data-state="open" \| "closed"` |
| easeful matches | `[data-motion~="collapse"][data-state="closed"]` |
| what runs | `animation: motion-exit, motion-collapse-exit` |
| you write | `<Collapsible.Content data-motion="collapse" />` |

## Every value that works here

Every value the manifest allows on this host, single presets and the pairs that compose. The first is what this component ships with. Both stages are the same component, so anything that changes between them is the attribute.

| Value | Link |
| --- | --- |
| `collapse` | the default |
| `fade` | [fade](/radix/collapsible#motion=fade) |
| `scale-fade` | [scale-fade](/radix/collapsible#motion=scale-fade) |
| `slide-up` | [slide-up](/radix/collapsible#motion=slide-up) |
| `fade collapse` | [fade collapse](/radix/collapsible#motion=fade%20collapse) |
| `fade slide-up` | [fade slide-up](/radix/collapsible#motion=fade%20slide-up) |
| `scale-fade slide-up` | [scale-fade slide-up](/radix/collapsible#motion=scale-fade%20slide-up) |

## Source

`apps/docs/components/demos/radix/collapsible.tsx`

```tsx
"use client"

import { Collapsible } from "radix-ui"
import type { DemoProps } from "@/components/demos/props"

export function RadixCollapsible({ motion }: DemoProps) {
  return (
    <Collapsible.Root>
      <Collapsible.Trigger className="btn">Toggle panel</Collapsible.Trigger>
      <Collapsible.Content data-motion={motion}>
        <div className="panel" style={{ marginTop: 12 }}>
          <p className="panel__body">
            One grid row, animated from 1fr to 0fr. Nothing measures the panel, so nothing has to
            be handed back a pixel value.
          </p>
        </div>
      </Collapsible.Content>
    </Collapsible.Root>
  )
}
```