Collapsible
This component is a collapsible fieldset. It allows the user to click the fieldset legend and toggle open and closed the information.
Requires:
dist/js/foreach-nodelist/vendors/foreach-nodelist.jsdist/js/toggle-class.bundle.js
{#
/**
* @file
* Collapsible fieldset component.
*/
#}
{{ attach_library('h4h_theme/collapsible') }}
{% import '@h4h_theme/icons/icons.twig' as icons %}
<section class="collapsible">
<fieldset>
<legend class="collapsible__legend">
<span class="collapsible__title {{ collapsed ? '' : 'is-active'}}" data-toggle-class="is-open" data-target=".{{ selectorClass }}">
{{ legend }}
{{ icons.get('chevronright', 'icon collapsible__icon') }}
</span>
</legend>
<div class="collapsible__wrapper {{ selectorClass }}{{ collapsed ? '' : ' is-open'}}">
<div class="collapsible__content">
{{ children }}
</div>
</div>
</fieldset>
</section>