Accordion
This component is a Accordion. It allows the user to
click the title and toggle open and closed the information.
The accordion can be rendered starting open if the item variable expanded is
set to true.
The container title text is also variable. The level variable need to be
passed a heading value ie 3, else it will default to h2.
Requires:
dist/js/foreach-nodelist/vendors/foreach-nodelist.jsdist/js/toggle-class.bundle.js
Accordion heading (optional)
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed augue id purus scelerisque eleifend consectetur ac dolor. Nunc eu dapibus purus, vitae sodales nibh. Vivamus malesuada ipsum id lacus egestas ullamcorper. Mauris nec dictum massa. Phasellus pharetra et nunc eget pulvinar. Nunc sollicitudin lectus non dolor consectetur tempor. Quisque id erat accumsan, molestie velit vel, pretium sapien. Phasellus in ipsum in elit pharetra consectetur eget sit amet nulla. In dui justo, accumsan malesuada augue id, mattis porta risus. Nam ut ligula elit. Curabitur dolor metus, fermentum vitae felis sit amet, consequat porta lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus bibendum semper mauris id aliquam. Ut interdum metus varius justo tempus, ac tempor dui finibus.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed augue id purus scelerisque eleifend consectetur ac dolor. Nunc eu dapibus purus, vitae sodales nibh. Vivamus malesuada ipsum id lacus egestas ullamcorper. Mauris nec dictum massa. Phasellus pharetra et nunc eget pulvinar. Nunc sollicitudin lectus non dolor consectetur tempor. Quisque id erat accumsan, molestie velit vel, pretium sapien. Phasellus in ipsum in elit pharetra consectetur eget sit amet nulla. In dui justo, accumsan malesuada augue id, mattis porta risus. Nam ut ligula elit. Curabitur dolor metus, fermentum vitae felis sit amet, consequat porta lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus bibendum semper mauris id aliquam. Ut interdum metus varius justo tempus, ac tempor dui finibus.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed augue id purus scelerisque eleifend consectetur ac dolor. Nunc eu dapibus purus, vitae sodales nibh. Vivamus malesuada ipsum id lacus egestas ullamcorper. Mauris nec dictum massa. Phasellus pharetra et nunc eget pulvinar. Nunc sollicitudin lectus non dolor consectetur tempor. Quisque id erat accumsan, molestie velit vel, pretium sapien. Phasellus in ipsum in elit pharetra consectetur eget sit amet nulla. In dui justo, accumsan malesuada augue id, mattis porta risus. Nam ut ligula elit. Curabitur dolor metus, fermentum vitae felis sit amet, consequat porta lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus bibendum semper mauris id aliquam. Ut interdum metus varius justo tempus, ac tempor dui finibus.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed augue id purus scelerisque eleifend consectetur ac dolor. Nunc eu dapibus purus, vitae sodales nibh. Vivamus malesuada ipsum id lacus egestas ullamcorper. Mauris nec dictum massa. Phasellus pharetra et nunc eget pulvinar. Nunc sollicitudin lectus non dolor consectetur tempor. Quisque id erat accumsan, molestie velit vel, pretium sapien. Phasellus in ipsum in elit pharetra consectetur eget sit amet nulla. In dui justo, accumsan malesuada augue id, mattis porta risus. Nam ut ligula elit. Curabitur dolor metus, fermentum vitae felis sit amet, consequat porta lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus bibendum semper mauris id aliquam. Ut interdum metus varius justo tempus, ac tempor dui finibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed augue id purus scelerisque eleifend consectetur ac dolor. Nunc eu dapibus purus, vitae sodales nibh. Vivamus malesuada ipsum id lacus egestas ullamcorper. Mauris nec dictum massa. Phasellus pharetra et nunc eget pulvinar. Nunc sollicitudin lectus non dolor consectetur tempor. Quisque id erat accumsan, molestie velit vel, pretium sapien. Phasellus in ipsum in elit pharetra consectetur eget sit amet nulla. In dui justo, accumsan malesuada augue id, mattis porta risus. Nam ut ligula elit. Curabitur dolor metus, fermentum vitae felis sit amet, consequat porta lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus bibendum semper mauris id aliquam. Ut interdum metus varius justo tempus, ac tempor dui finibus.
{#
/**
* @file
* accordion component.
*/
#}
{{ attach_library('h4h_theme/accordion') }}
{{ attach_library('h4h_theme/basic-text') }}
{% import '@h4h_theme/icons/icons.twig' as icons %}
<div class="basic-text">
{% if heading %}
<h{{ heading_level ?: '2' }} class="accordion__heading">{{ heading }}</h{{ heading_level ?: '2' }}>
{% endif %}
{% for item in accordion_items %}
<section class="accordion {{accordion_type_arrow ? "accordion-type-arrow"}}" role="presentation">
<div>
<dl class="accordion__legend">
<dt class="accordion__title {{ item.expanded ? 'is-active' : '' }}" data-toggle-class="is-open" data-target=".{{ item.selectorClass }}">
{% if accordion_type_arrow %}
{{ icons.get('chevronright', 'icon accordion__icon accordion__icon--arrow') }}
{% endif %}
<button class="accordion__trigger" aria-controls="{{ item.selectorClass }}">
{% if item.inactive_title %}
<span class="active-title">{{ item.title }}</span>
<span class="inactive-title">{{ item.inactive_title }}</span>
{% else %}
{{ item.title }}
{% endif %}
</button>
{% if not accordion_type_arrow %}
{{ icons.get('plusminus', 'icon accordion__icon') }}
{% endif %}
</dt>
<dd class="accordion__wrapper {{ item.selectorClass }}{{ item.expanded ? ' is-open' : '' }}">
<div class="accordion__content">
{{ item.children }}
</div>
</dd>
</dl>
</div>
</section>
{% endfor %}
</div>