36 lines
1.4 KiB
Twig
36 lines
1.4 KiB
Twig
{#
|
|
Collapsible section with a heading trigger and a chevron.
|
|
|
|
heading string visible heading text (required)
|
|
id string unique per page; wires aria-controls (required)
|
|
open bool initial state (default false)
|
|
headingLevel int aria-level of the heading (default 2)
|
|
contentClass string classes on the body wrapper (default 'rte-content')
|
|
storageKey string persist open state in sessionStorage (default '')
|
|
#}
|
|
<div {{ stimulus_controller('toggle',
|
|
{ 'open': open|default(false), 'storageKey': storageKey|default('') },
|
|
{ 'closed': 'hidden', 'iconOpen': 'rotate-180' }) }}>
|
|
<button type="button"
|
|
class="flex items-center justify-between w-full text-left"
|
|
data-action="toggle#toggle"
|
|
data-toggle-target="trigger"
|
|
aria-expanded="{{ open|default(false) ? 'true' : 'false' }}"
|
|
aria-controls="{{ id }}-content">
|
|
<span class="block text-2xl md:text-3xl font-bold mb-2"
|
|
role="heading"
|
|
aria-level="{{ headingLevel|default(2) }}">
|
|
{{ heading }}
|
|
</span>
|
|
<span class="shrink-0 transition-transform" data-toggle-target="icon">
|
|
{{ icon('chevron-down', 'w-5 h-5') }}
|
|
</span>
|
|
</button>
|
|
|
|
<div id="{{ id }}-content"
|
|
class="{{ contentClass|default('rte-content') }}"
|
|
data-toggle-target="content">
|
|
{% block body %}{% endblock %}
|
|
</div>
|
|
</div>
|