# Collapsible: Show more

> The panel sits above its trigger. When it closes, the gap in the parent’s flex layout collapses in the same animation, so the button below never jumps.

Example: https://hextaui.com/docs/collapsible/examples/show-more
Component docs: https://hextaui.com/docs/collapsible.md

## Add this example

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

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

## Source

```tsx title="components/examples/collapsible/show-more.tsx"
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
  CollapsibleTriggerIcon,
} from "@/components/ui/collapsible"

export function CollapsibleShowMore() {
  const [open, setOpen] = React.useState(false)

  return (
    <Collapsible
      open={open}
      onOpenChange={setOpen}
      className="flex max-w-md flex-col gap-3"
    >
      <p className="text-sm text-muted-foreground">
        HextaUI components are built on Base UI primitives and styled with
        Tailwind. You own the source, so every class can be changed.
      </p>
      <CollapsibleContent>
        <p className="text-sm text-muted-foreground">
          Motion is interruptible: clicking again mid-animation reverses from
          where the panel is instead of snapping. The gap between this paragraph
          and its neighbours collapses in the same animation, so nothing below
          jumps when it finishes.
        </p>
      </CollapsibleContent>
      <div>
        <CollapsibleTrigger render={<Button variant="outline" size="sm" />}>
          {open ? "Show less" : "Show more"}
          <CollapsibleTriggerIcon data-icon="inline-end" />
        </CollapsibleTrigger>
      </div>
    </Collapsible>
  )
}
```

## Props in this example

### Collapsible

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` | `boolean` | – |  |
| `onOpenChange` | `(open: boolean, details) => void` | – |  |

### CollapsibleTrigger

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

## More Collapsible examples

- [Open by default](https://hextaui.com/docs/collapsible/examples/open-by-default.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)
- [Inside a card](https://hextaui.com/docs/collapsible/examples/card.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)