> For the complete documentation index, see [llms.txt](https://docs.trydrupal.com/radix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.trydrupal.com/radix/components/accordion.md).

# Accordion

[**Bootstrap docs**](https://getbootstrap.com/docs/5.3/components/accordion/)

### Component Properties

The Accordion component takes a variety of properties to customize its appearance and content:

* `title` : The title of the accordion. 
* `title_tag` : The HTML tag to use for the title. Default is `h2`. 
* `title_link` : A link to wrap the title in. 
* `items` (required): An array of items to display in the accordion.
*  `accordion_item_utility_classes` : An array of utility classes to apply to each accordion item. 
* `accordion_utility_classes` : An array of classes to apply to the accordion. 
* `flush` : A boolean to determine if the accordion should have flush borders. 
* `open_item_id` : The id of the item to be open by default. 
* `id` : The id of the accordion.
* `stay_open` : A boolean to determine if an accordion item should stay open when another item is opened. Default is `false`.

### Usage

**Example 1**: Simple Accordion usage

```twig
{% include 'radix:accordion' with {
  title: 'Yolo!',
  open_item_id: 1,
  title_tag: 'h2',
  flush: true,
  accordion_item_utility_classes: [
    'custom-class'
  ],
  items: [
    {
      title: 'Item 1',
      title_tag: 'h3',
      content: 'Content 1',
      stay_open: true,
    },
    {
      title: 'Item 2',
      title_tag: 'h3',
      content: 'Content 2',
    },
    {
      title: 'Item 3',
      title_tag: 'h3',
      content: 'Content 3',
    },
  ],
} %}
```

**Example 2**: Advanced usage of Accordion usage in Views of FAQ node teaser view mode by overriding the related `views-view--unformatted` template:

```twig
{% embed "radix:views-view--unformatted" %}
  {% block views_unformatted_rows %}
    {% set accordion_items = [] %}
    {% for row in rows %}
      {% set node = row.content['#node'] %}
      {% set node_title = node.getTitle() %}
      {% set node_body = node.body.processed %}
      {% set accordion_item = {
        title_tag: 'h3',
        title: node_title,
        content: node_body,
      } %}

      {% set accordion_items = accordion_items|merge([accordion_item]) %}
    {% endfor %}

    {% include 'radix:accordion' with {
      open_item_id: 1,
      id: 'faq',
      flush: true,
      items: accordion_items
    } %}
  {% endblock %}
{% endembed %}
```