# Collapsible

Use `b-ui="collapsible"` for a single disclosure region.

## Pure Owl component

```js
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@thebase/ui";
```

```base-ui
<div style="max-width: 28rem" class="w-100">
  <Collapsible>
    <CollapsibleTrigger>Toggle details</CollapsibleTrigger>
    <CollapsibleContent>
      <div>Status: Shipped</div>
    </CollapsibleContent>
  </Collapsible>
</div>
```

| Component | Prop | Type | Notes |
| --- | --- | --- | --- |
| `Collapsible` | `open` | `Boolean` | optional |
| `Collapsible` | `defaultOpen` | `Boolean` | optional |
| `Collapsible` | `onOpenChange` | `Function` | optional |
| `Collapsible` | `className` | `String` | optional |
| `CollapsibleContent` | `className` | `String` | optional |
| `CollapsibleTrigger` | `className` | `String` | optional |

See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.

## Static component

```base-ui
<div b-ui="collapsible">
  <button b-collapsible-trigger type="button">Show details</button>
  <div b-collapsible-panel>Hidden content</div>
</div>
```

State is reflected through `b-att-state="open|closed"` and `aria-expanded`. Events: `baseui:change`.

The panel (`b-collapsible-panel` / `CollapsibleContent`'s root) is driven by a live `bootstrap.Collapse` instance: it always carries the Bootstrap `collapse` class (plus `show` while open), and Bootstrap itself manages the `collapsing`/height transition and the `show` class across toggles — don't rely on `hidden`/node removal to detect open state.