# Accordion

Collapsible accordion component for organizing content into expandable sections.

## Tag

`Accordion`

## Props

| Prop       | Type                         | Default          | Description                                |
| :--------- | :--------------------------- | :--------------- | :----------------------------------------- |
| `title`    | `string \| VNode \| Signal`  | Required         | Accordion section title                    |
| `open`     | `boolean \| Signal<boolean>` | `false`          | Whether the accordion is expanded          |
| `name`     | `string`                     | `auto-generated` | Group name for radio-style accordions      |
| `class`    | `string`                     | `''`             | Additional CSS classes                     |
| `children` | `VNode \| Array<VNode>`      | Required         | Content to display when expanded           |
| `items`    | `Array`                      | `-`              | Array of accordion items (alternative API) |

## Live Examples

### Basic Accordion

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```js
const { Accordion, Div, mount } = window;

const BasicDemo = () => {
  const open1 = $(false);
  const open2 = $(false);
  const open3 = $(false);

  return div({ class: "flex flex-col gap-2" }, [
    Accordion(
      {
        title: "Section 1",
        open: open1,
      },
      div(
        { class: "p-2" },
        "Content for section 1. This is a basic accordion section.",
      ),
    ),
    Accordion({
      title: "Section 2",
      open: open2,
    }, div(
        { class: "p-2" },
        "Content for section 2. You can put any content here.",
      ),),
    Accordion({
      title: "Section 3",
      open: open3,
      children: div(
        { class: "p-2" },
        "Content for section 3. Accordions are great for FAQs.",
      ),
    }),
  ]);
};
mount(BasicDemo, "#demo-basic");
```