# Collapsible: Inside a card

> Closed panels stay in the page with hidden=“until-found”, so Cmd/Ctrl+F for “webhook” opens this one.

Example: https://hextaui.com/docs/collapsible/examples/card
Component docs: https://hextaui.com/docs/collapsible.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/collapsible-card.json
```

This adds `components/examples/collapsible/card.tsx` with the Collapsible component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/collapsible/card.tsx"
import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
  CollapsibleTriggerIcon,
} from "@/components/ui/collapsible"

export function CollapsibleCard() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Notifications</CardTitle>
        <CardDescription>Choose where alerts are sent.</CardDescription>
      </CardHeader>
      <CardContent>
        <Collapsible className="flex flex-col gap-3">
          <CollapsibleTrigger
            render={<Button variant="outline" />}
            className="justify-between"
          >
            Advanced settings
            <CollapsibleTriggerIcon data-icon="inline-end" />
          </CollapsibleTrigger>
          <CollapsibleContent className="flex flex-col gap-2 text-sm text-muted-foreground">
            <p>Send a webhook to your endpoint for every alert.</p>
            <p>Retry failed deliveries up to five times with backoff.</p>
            <p>Group alerts that arrive within 30 seconds.</p>
          </CollapsibleContent>
        </Collapsible>
      </CardContent>
    </Card>
  )
}
```

## Props in this example

### CollapsibleTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<button>` | Usually a Button. |

### CollapsibleContent

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string` | – | Applied to the inner wrapper, so padding never fights the height animation. |

## More Collapsible examples

- [Open by default](https://hextaui.com/docs/collapsible/examples/open-by-default.md)
- [Show more](https://hextaui.com/docs/collapsible/examples/show-more.md)
- [Controlled](https://hextaui.com/docs/collapsible/examples/controlled.md)
- [Disabled](https://hextaui.com/docs/collapsible/examples/disabled.md)
- [Custom icon](https://hextaui.com/docs/collapsible/examples/custom-icon.md)
- [File tree](https://hextaui.com/docs/collapsible/examples/file-tree.md)
- [Unmounted when closed](https://hextaui.com/docs/collapsible/examples/unmounted.md)
- [Long content](https://hextaui.com/docs/collapsible/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/collapsible/examples/rtl.md)