feat: extract collapsible container into partial
This commit is contained in:
@@ -0,0 +1,35 @@
|
||||
{#
|
||||
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>
|
||||
Reference in New Issue
Block a user