# Accordion

> Bootstrap's accordion component built with Svelte 5. Use the accordion component to build vertically collapsing accordions.

Source: https://bootstrap-svelte.vercel.app/components/accordion — part of the Bootstrap Svelte documentation (index: https://bootstrap-svelte.vercel.app/llms.txt).

## Basic Example

The basic accordion includes several items that can be expanded and collapsed independently. By default, only one item can be open at a time.

```html
<Accordion.Root>
  <Accordion.Item>
    <Accordion.Header>
      <Accordion.Button>Accordion Item #1</Accordion.Button>
    </Accordion.Header>
    <Accordion.Collapse>
      <Accordion.Body>
        <strong>This is the first item's accordion body.</strong>
        It is shown by default, until the collapse plugin adds the appropriate
        classes that we use to style each element. You can modify any of this
        with custom CSS or overriding our default variables.
      </Accordion.Body>
    </Accordion.Collapse>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Header>
      <Accordion.Button>Accordion Item #2</Accordion.Button>
    </Accordion.Header>
    <Accordion.Collapse>
      <Accordion.Body>
        <strong>This is the second item's accordion body.</strong>
        It is hidden by default, until the collapse plugin adds the appropriate
        classes that we use to style each element.
      </Accordion.Body>
    </Accordion.Collapse>
  </Accordion.Item>
</Accordion.Root>
```

## Always Open

Set the `isMultiple` prop to `true` to make accordion items stay open when another item is opened.

```html
<Accordion.Root isMultiple={true}>
  <Accordion.Item>
    <Accordion.Header>
      <Accordion.Button>Accordion Item #1</Accordion.Button>
    </Accordion.Header>
    <Accordion.Collapse>
      <Accordion.Body>
        <strong>This is the first item's accordion body.</strong>
        It can remain open when another item is opened, because
        the isMultiple prop is set to true.
      </Accordion.Body>
    </Accordion.Collapse>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Header>
      <Accordion.Button>Accordion Item #2</Accordion.Button>
    </Accordion.Header>
    <Accordion.Collapse>
      <Accordion.Body>
        <strong>This is the second item's accordion body.</strong>
        It can stay open when other items are opened.
      </Accordion.Body>
    </Accordion.Collapse>
  </Accordion.Item>
</Accordion.Root>
```

## Flush

Add the `isFlush` prop to remove the default background color, some borders, and rounded corners.

```html
<Accordion.Root isFlush={true}>
  <Accordion.Item>
    <Accordion.Header>
      <Accordion.Button>Accordion Item #1</Accordion.Button>
    </Accordion.Header>
    <Accordion.Collapse>
      <Accordion.Body>
        <strong>This is the first item's accordion body.</strong>
        Notice there is no border or background. This is a flush accordion.
      </Accordion.Body>
    </Accordion.Collapse>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Header>
      <Accordion.Button>Accordion Item #2</Accordion.Button>
    </Accordion.Header>
    <Accordion.Collapse>
      <Accordion.Body>
        <strong>This is the second item's accordion body.</strong>
        The flush accordion removes borders and background.
      </Accordion.Body>
    </Accordion.Collapse>
  </Accordion.Item>
</Accordion.Root>
```

## Custom Styling

You can style the accordion using Bootstrap's utility classes to create custom themes.

```html
<div class="bg-dark p-4 rounded">
  <Accordion.Root>
    <Accordion.Item class="bg-dark text-white">
      <Accordion.Header>
        <Accordion.Button class="text-white">Dark Theme Item #1</Accordion.Button>
      </Accordion.Header>
      <Accordion.Collapse>
        <Accordion.Body>
          <strong>This is styled with dark theme classes.</strong>
          You can customize the appearance using standard Bootstrap classes.
        </Accordion.Body>
      </Accordion.Collapse>
    </Accordion.Item>
    <Accordion.Item class="bg-dark text-white">
      <Accordion.Header>
        <Accordion.Button class="text-white">Dark Theme Item #2</Accordion.Button>
      </Accordion.Header>
      <Accordion.Collapse>
        <Accordion.Body>
          <strong>This is the second dark-themed item.</strong>
          Custom styling can be applied to create various visual effects.
        </Accordion.Body>
      </Accordion.Collapse>
    </Accordion.Item>
  </Accordion.Root>
</div>
```

## API Reference

The Accordion component is composed of several sub-components:

### Accordion.Root

The main accordion container component

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | `undefined` | Additional CSS classes to apply |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element |
| `isMultiple` | `boolean` | `false` | Allows multiple items to be open simultaneously |
| `isFlush` | `boolean` | `false` | Removes borders and background from the accordion |
| `id` | `string` | `auto-generated` | Unique ID for the collapse element |

### Accordion.Item

Container for an individual accordion item

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | `undefined` | Additional CSS classes to apply |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element |
| `isExpanded` | `boolean` | `false` | Controls whether the item is initially expanded |
| `id` | `string` | `auto-generated` | Unique ID for the collapse element |

### Accordion.Header

The heading container for the accordion item

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | `undefined` | Additional CSS classes to apply |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element |
| `id` | `string` | `auto-generated` | Unique ID for the collapse element |

### Accordion.Button

The clickable button that toggles the accordion item

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | `undefined` | Additional CSS classes to apply |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element |
| `id` | `string` | `auto-generated` | Unique ID for the collapse element |

### Accordion.Collapse

The collapsible container that wraps the accordion body

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | `undefined` | Additional CSS classes to apply |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element |
| `id` | `string` | `auto-generated` | Unique ID for the collapse element |

### Accordion.Body

The content container for the accordion item

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | `undefined` | Additional CSS classes to apply |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element |
| `id` | `string` | `auto-generated` | Unique ID for the collapse element |

### CSS Classes

The components apply Bootstrap's accordion classes based on the provided props:

- `accordion` - Base class for the Root component
- `accordion-flush` - Applied to Root when isFlush is true
- `accordion-item` - Base class for the Item component
- `accordion-header` - Base class for the Header component
- `accordion-button` - Base class for the Button component
- `accordion-collapse` - Base class for the Collapse component
- `accordion-body` - Base class for the Body component
- `collapsed` - Applied to Button when the corresponding item is not expanded
- `show` - Applied to Collapse when the corresponding item is expanded