# Accordion

Accordion is a neobrutalist React component from Cruise UI. Sections that open and close, one or several at a time: FAQs, details, settings.

Install (with the @cruiseui registry in components.json, see Installation):

```bash
npx shadcn@latest add @cruiseui/accordion
```

Import: `import { CruiseAccordion } from "@/components/cruise/accordion";`

## When to use

Long pages of questions or details where people look for one answer (FAQ).

## When not to

Content everyone needs to read (just show it). Switching views (use Tabs).

## Example (React)

```tsx
import { CruiseAccordion } from "@/components/cruise/accordion";

const faqs = [
  {
    value: "delivery",
    title: "How long does delivery take?",
    content: "Same day in Lagos for orders before 12 noon; 2–3 days elsewhere.",
  },
  {
    value: "payment",
    title: "How can I pay?",
    content: "Card, bank transfer or USSD. You can also pay on delivery in Lagos.",
  },
  {
    value: "refunds",
    title: "Can I get a refund?",
    content: "Yes, within 7 days if the item is unused. We refund to your original payment method.",
  },
];

export default function AccordionExample() {
  return <CruiseAccordion items={faqs} defaultValue={["delivery"]} />;
}
```

## HTML

Needs theme.css (https://cruiseui.dev/theme.css).

```html
<div class="accordion">
  <details class="accordion-item" open>
    <summary class="accordion-trigger"><span>How long does delivery take?</span><span class="accordion-icon" aria-hidden="true"></span></summary>
    <div class="accordion-panel"><div class="accordion-content">Same day in Lagos for orders before 12 noon; 2–3 days elsewhere.</div></div>
  </details>
  <details class="accordion-item">
    <summary class="accordion-trigger"><span>How can I pay?</span><span class="accordion-icon" aria-hidden="true"></span></summary>
    <div class="accordion-panel"><div class="accordion-content">Card, bank transfer or USSD.</div></div>
  </details>
</div>
<!-- One open at a time: give the <details> the same name="faq" attribute. -->
```

## Props: CruiseAccordion

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `CruiseAccordionItem[]` | — | — |
| `multiple?` | `boolean` | `false` | Let several panels be open at once. |
| `defaultValue?` | `string[]` | — | Values of the panels open at first. |
| `className?` | `string` | — | — |

## Accessibility

- Each header is a real button with aria-expanded and aria-controls.
- Enter and Space toggle; the open state shows as − / +, not colour alone.
- No height animation under reduced motion.