Etat Pur Design System

Accordion: Default 

<div x-data="{ expanded: false, highlightOnOpen: false }" class=" accordion-black transition-all duration-300 ease-in-out" :class="highlightOnOpen && expanded ? 'border-t border-brand-500' : ''" id="accordion-0">
    <div class="">
        <button type="button" @click="expanded = !expanded" class="accordion-button flex justify-between items-center w-full py-3" :aria-expanded="expanded" aria-controls="accordion-content-0">
            <span class="flex flex-wrap gap-2  transition-colors duration-300 ease-in-out" :class="highlightOnOpen && expanded ? 'text-brand-500' : ''">
                <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" fill="none" />
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" fill="none" />

                </svg> Accordion label
            </span>
            <span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300" aria-hidden="true">
                <svg class=" shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />

                </svg> </span>
        </button>
    </div>
    <div x-cloak x-show="expanded" x-collapse id="accordion-content-0" class="">
        <div class="pt-2 pb-4">
            <div class="pb-3">
                Accordion content
            </div>
        </div>
    </div>
</div>
 
{# src/components/molecules/accordion/accordion.twig #}

<div x-data="{ expanded: {{ expanded ? 'true' : 'false' }}, highlightOnOpen: {{ highlightOnOpen is defined and highlightOnOpen ? 'true' : 'false' }} }"
     class="{{ accordion_class }} {{ color == 'light' ? 'accordion-light' : 'accordion-black' }} transition-all duration-300 ease-in-out"
     :class="highlightOnOpen && expanded ? 'border-t border-brand-500' : ''"
     id="accordion-{{ loop.index0|default(0) }}"
>
    <div class="{{ accordion_title_class }}">
        <button type="button"
                @click="expanded = !expanded"
                class="accordion-button flex justify-between items-center w-full {{ accordion_button_class|default('py-3') }}"
                :aria-expanded="expanded"
                aria-controls="accordion-content-{{ loop.index0|default(0) }}"
        >
            <span class="flex flex-wrap gap-2 {{ accordion_label_class }} transition-colors duration-300 ease-in-out"
                  :class="highlightOnOpen && expanded ? 'text-brand-500' : ''">
                {% if startIcon is defined and startIcon %}
                    {% render "@icons-" ~ startIcon.name with {size: startIcon.size, iconClass: startIcon.class} %}
                {% endif %}
                {{ title }}
            </span>
            <span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300" aria-hidden="true">
                {% render "@icons-heroicons--chevron-down-mini" with {
                    width: width|default('20'),
                    height: height|default('20')
                } %}
            </span>
        </button>
    </div>
    <div x-cloak
         x-show="expanded"
         x-collapse
         id="accordion-content-{{ loop.index0|default(0) }}"
         class="{{ accordion_content_class }}"
    >
        <div class="pt-2 pb-4">
            <div class="pb-3">
                {% block content '' %}
                {{ content }}
            </div>
            {% if link is defined and link.url and link.text %}
                <a href="{{ link.url }}" class="link-dark link-medium underline">
                    {{ link.text }}
                </a>
            {% endif %}
        </div>
    </div>
</div>
 
{
  "startIcon": {
    "name": "heroicons--map-pin-outline",
    "size": "24"
  },
  "title": "Accordion label",
  "content": "Accordion content"
}

No notes defined.