# Collapsible
{"@thomkrupa starred 3 repositories"}
{"@data-slot/collapsible"}
{"@bejamas/ui"}
{"@astrojs/astro"}
```astro --- ---
@thomkrupa starred 3 repositories
@data-slot/collapsible
@bejamas/ui
@astrojs/astro
 ``` ## Installation ```bash bunx bejamas add collapsible ``` ```bash npx bejamas add collapsible ``` ```bash pnpm dlx bejamas add collapsible ``` ```bash yarn dlx bejamas add collapsible ``` ## Usage ```astro nocollapse --- --- Hidden content here ``` ## Props | Prop | Type | Default | |---|---|---| | class | `string` | `""` | | open | `boolean` | `false` | | hiddenUntilFound | `boolean` | `false` | ## Examples ### Default open
{"Expanded by default"}
{"This content is visible by default"}
```astro --- ---
Expanded by default
This content is visible by default
 ``` ### Animated content
{" This content animates panel height using CSS variables. "}
```astro --- ---
This content animates panel height using CSS variables.
``` ### Find-in-page support
{" Search this sentence with browser find to auto-expand. "}
```astro --- ---
Search this sentence with browser find to auto-expand.
``` ## API Reference ### Props | Prop | Element | Values | Default | |------|---------|--------|---------| | `open` | collapsible | `boolean` | `false` | | `hiddenUntilFound` | collapsible | `boolean` | `false` | | `animation` | collapsible-content | `none`, `slide` | `none` | `slide` uses `--collapsible-panel-height` for smooth height transitions. ### Events The collapsible emits custom events that you can listen to: | Event | Detail | Description | |-------|--------|-------------| | `collapsible:change` | `{ open: boolean }` | Fired when the open state changes |
{"Toggle"} {"Hidden content"}
```astro nocollapse Toggle Hidden content ``` ```js nocollapse const collapsible = document.getElementById('my-collapsible'); collapsible.addEventListener('collapsible:change', (e) => { console.log('Is open:', e.detail.open); }); ``` ### Programmatic Control You can control the collapsible programmatically by dispatching a `collapsible:set` event: ```js nocollapse const collapsible = document.getElementById('my-collapsible'); // Open the collapsible collapsible.dispatchEvent(new CustomEvent('collapsible:set', { detail: { open: true } })); // Close the collapsible collapsible.dispatchEvent(new CustomEvent('collapsible:set', { detail: { open: false } })); ``` ### Data Attributes The collapsible sets these data attributes that you can use for styling or querying state: | Attribute | Element | Description | |-----------|---------|-------------| | `data-state` | collapsible, collapsible-content | Current state (`open` or `closed`) | | `data-hidden-until-found` | collapsible | Enables `hidden="until-found"` when closed | | `data-starting-style` | collapsible-content | Added while enter transition styles are applied | | `data-ending-style` | collapsible-content | Added while exit transition styles are applied | ### CSS Variables The collapsible content exposes size variables for dimension animations: | Variable | Element | Description | |----------|---------|-------------| | `--collapsible-panel-height` | collapsible-content | Measured panel height | | `--collapsible-panel-width` | collapsible-content | Measured panel width |