# Collapsible

## Overview

A single expandable/collapsible content section with a trigger header. Unlike `<Accordion>`, `Collapsible` is a standalone element — it has no sibling items and no managed "only one open" behavior.

---

## When to Use

- A single section of additional details that is hidden by default
- "Show more" / "Show less" controls
- Expandable code snippets or technical details
- A configuration section that most users skip

## When NOT to Use

- Multiple related collapsible sections — use `<Accordion>` instead.

---

## Anatomy

```
<Collapsible>
  <CollapsibleTrigger asChild>
    <Button />
  </CollapsibleTrigger>
  <CollapsibleContent>
    {/* Hidden content */}
  </CollapsibleContent>
</Collapsible>
```

---

## Props

### Collapsible

| Prop           | Type                      | Default | Description           |
| -------------- | ------------------------- | ------- | --------------------- |
| `open`         | `boolean`                 | —       | Controlled open state |
| `defaultOpen`  | `boolean`                 | `false` | Uncontrolled default  |
| `onOpenChange` | `(open: boolean) => void` | —       | Change handler        |
| `disabled`     | `boolean`                 | `false` | Prevents toggling     |

---

## Examples

```tsx
import { Collapsible, CollapsibleContent, CollapsibleTrigger, Button } from 'xertica-ui/ui';
import { ChevronsUpDown } from 'lucide-react';
import { useState } from 'react';

const [isOpen, setIsOpen] = useState(false);

<Collapsible open={isOpen} onOpenChange={setIsOpen}>
  <div className="flex items-center justify-between">
    <h4 className="text-sm font-semibold">Advanced Settings</h4>
    <CollapsibleTrigger asChild>
      <Button variant="ghost" size="icon">
        <ChevronsUpDown className="size-4" />
      </Button>
    </CollapsibleTrigger>
  </div>
  <CollapsibleContent className="space-y-2 mt-4">
    <p className="text-sm text-muted-foreground">Advanced configuration options appear here.</p>
  </CollapsibleContent>
</Collapsible>;
```

---

## AI Rules

- For multiple related collapsible sections, use `<Accordion>` instead.
- `<CollapsibleTrigger asChild>` is required when wrapping a `<Button>`.
- `CollapsibleContent` is animated by default — do not add custom height transitions.

---

## Related Components

- [`Accordion`](./accordion.md) — For multiple related collapsible sections