Accordion

Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.

Bootstrap docs

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

{% 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:

{% 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 %}