# 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 %}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.trydrupal.com/radix/components/accordion.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.