# SvCollapsible
A single show/hide section: a header that toggles one region of content open and
closed, with a smooth height animation. The standalone building block behind an
accordion.
`SvCollapsible` is one disclosure - use it for an "Advanced options" panel, a
details drawer, or a filter section. It animates height with a
`grid-template-rows` transition, sets `inert` on the closed region so hidden
content is skipped by tab order and assistive tech, and wires
`aria-expanded`/`aria-controls` for you. For several linked sections with
single-open behaviour, reach for [SvAccordion](https://svgrid.com/docs/help/ui-components/sv-accordion/).
Related: [SvAccordion](https://svgrid.com/docs/help/ui-components/sv-accordion/) · [SvTabs](https://svgrid.com/docs/help/ui-components/sv-tabs/) · [SvCard](https://svgrid.com/docs/help/ui-components/sv-card/)
## Installation
Add it with the CLI - this drops a ready-to-edit `SvCollapsible` starter into your app:
Prefer to see it first? `npx @svgrid/ui try collapsible` opens it in a throwaway sandbox - no project needed.
Or install the package and import it directly. `SvCollapsible` ships free in
`@svgrid/grid` (dependency-free):
```ts
import { SvCollapsible } from '@svgrid/grid'
```
## Example
> Live demo: Layout & feedback primitives - https://svgrid.com/demos/409-layout-feedback/
```svelte
Standard delivery, 3-5 business days.
```
## Props
| Prop | Type | Default | Description |
| -------------- | --------------------------- | ------- | ------------------------------------------------------------- |
| `title` | `string` | - | Header text. Omit and use the `header` snippet for custom. |
| `open` | `boolean` (bindable) | `false` | Whether the region is expanded. |
| `onOpenChange` | `(open: boolean) => void` | - | Fires when the open state toggles. |
| `disabled` | `boolean` | `false` | Disable the trigger; the region stays as-is. |
| `header` | `Snippet` | - | Custom header content in place of `title`. |
| `children` | `Snippet` | - | The collapsible region content. |
## Accessibility
- The header is a `