# Accordion

Use the accordion shortcode to show a group of vertically collapsing and expanding items.

## Overview

Use the `accordion` shortcode to show a group of vertically collapsing and expanding items. Add `accordion-item` inner elements for each accordion item.

### Flush

Add `.accordion-flush` to the `class` attributes to remove some borders and rounded corners to render accordions edge-to-edge within their parent container.

```markdown
{{< accordion id="accordion-flush" class="accordion-flush" >}}
  {{< accordion-item title="Accordion Item #1" >}}
    This is the first item's accordion body. It supports Markdown content. The item is shown by
    adding the value `show` to the `class` argument.
  {{< /accordion-item >}}
  {{< accordion-item title="Accordion Item #2" >}}
    This is the second item's accordion body. It too supports Markdown content.
  {{< /accordion-item >}}
  {{< accordion-item title="Accordion Item #3" >}}
    This is the third item's accordion body.
  {{< /accordion-item >}}
{{< /accordion >}}
```

### Always open

Set `always-open` to `true` to make accordion items stay open when another item is opened.

```markdown
{{< accordion id="accordion-always-open" always-open="true" >}}
  {{< accordion-item title="Accordion Item #1" >}}
    This is the first item's accordion body. It supports Markdown content. The item is shown by
    adding the value `show` to the `class` argument.
  {{< /accordion-item >}}
  {{< accordion-item title="Accordion Item #2" >}}
    This is the second item's accordion body. It too supports Markdown content.
  {{< /accordion-item >}}
  {{< accordion-item title="Accordion Item #3" >}}
    This is the third item's accordion body.
  {{< /accordion-item >}}
{{< /accordion >}}
```

## Styling

Check the [Bootstrap documentation](https://getbootstrap.com/docs/5.3/components/accordion/#css) for additional styling options.

## Arguments

The shortcode supports the following arguments:

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `always-open` | bool |  |  | Flag to make accordion items stay open when another item is opened. |
| `class` | string |  |  | Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element. |
| `id` | string |  |  | Unique identifier of the current element. |

Add an inner `accordion-item` element for each item of the accordion. The `accordion-item` element supports the following arguments:

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `class` | string |  |  | Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element. |
| `show` | bool |  |  | Flag to indicate an item should be shown. For elements with multiple items, only one item can be shown at a time. |
| `title` | string |  |  | Title of the element. If the element references a (local) page, the title overrides the referenced page's title. |