# Accordion: Long content

> Long titles wrap while the icon stays on the first line. Closed panels stay searchable, so Cmd/Ctrl+F for “retention” opens this one.

Example: https://hextaui.com/docs/accordion/examples/long-content
Component docs: https://hextaui.com/docs/accordion.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/accordion-long-content.json
```

This adds `components/examples/accordion/long-content.tsx` with the Accordion component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/accordion/long-content.tsx"
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

export function AccordionLongContent() {
  return (
    <Accordion className="w-full max-w-md">
      <AccordionItem value="long">
        <AccordionTrigger>
          What happens to my data if I cancel my subscription halfway through a
          billing period and later decide to come back?
        </AccordionTrigger>
        <AccordionContent>
          <p>
            Your workspace is kept for 30 days after cancellation. During that
            time you can reactivate and everything is restored exactly as you
            left it.
          </p>
          <p>
            After the retention window, data is permanently deleted. Read the{" "}
            <a href="#">data policy</a> for details.
          </p>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}
```

## Props in this example

### AccordionItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `Value` | – | Generated automatically when omitted. |

## More Accordion examples

- [Outline](https://hextaui.com/docs/accordion/examples/outline.md)
- [Separated](https://hextaui.com/docs/accordion/examples/separated.md)
- [Ghost](https://hextaui.com/docs/accordion/examples/ghost.md)
- [Multiple](https://hextaui.com/docs/accordion/examples/multiple.md)
- [Disabled](https://hextaui.com/docs/accordion/examples/disabled.md)
- [Controlled](https://hextaui.com/docs/accordion/examples/controlled.md)
- [Custom icon](https://hextaui.com/docs/accordion/examples/custom-icon.md)
- [Leading icons](https://hextaui.com/docs/accordion/examples/leading-icons.md)
- [Nested](https://hextaui.com/docs/accordion/examples/nested.md)
- [Right to left](https://hextaui.com/docs/accordion/examples/rtl.md)