Accordion
Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.
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 ish2
.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 isfalse
.
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 %}
Last updated
Was this helpful?