Etat Pur Design System

Accordion: Mobile Only 

<script>
    'use strict';

    function accordion(expanded = false) {
        return {
            expanded: expanded,
            isMobile: false,
            init() {
                this.checkExpand();
            },
            toggleExpanded() {
                this.expanded = !this.isMobile || !this.expanded;
            },
            checkExpand() {
                this.isMobile = window.innerWidth < 768;
            }
        };
    }
</script>

<div x-data="accordion()" @resize.debounce.100.window="expanded = !isMobile; checkExpand()" class=" accordion-dark" aria-labelledby="accordion-1537671123">
    <div class="">
        <button type="button" @click="toggleExpanded()" class="flex justify-between items-center w-full md:cursor-text " :class="isMobile ? 'accordion-button py-3' : ''" :aria-expanded="expanded" aria-controls="content-971909118" id="accordion-1537671123">
            <span class="flex flex-wrap gap-2 ">
                <span aria-hidden="true">
                    <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> </span>
                Accordion label
            </span>
            <span :class="expanded ? 'rotate-180' : ''" class="md:hidden transition-transform" aria-hidden="true">
                <svg class=" shrink-0" width="24" height="24" 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 id="content-971909118" x-cloak x-show="expanded || !isMobile" x-collapse class="">
        <div class="pt-2" :class="isMobile ? 'pb-4' : ''">
            <div :class="isMobile ? 'pb-3' : ''">
                Accordion content
            </div>
        </div>
    </div>
</div>
 
<script>
    'use strict';

    function accordion(expanded = false) {
        return {
            expanded: expanded,
            isMobile: false,
            init() {
                this.checkExpand();
            },
            toggleExpanded() {
                this.expanded = !this.isMobile || !this.expanded;
            },
            checkExpand() {
                this.isMobile = window.innerWidth < 768;
            }
        };
    }
</script>

{% set accordionId = "accordion-" ~ random() %}
{% set contentId = "content-" ~ random() %}

<div x-data="accordion({{ expanded }})"
     @resize.debounce.100.window="expanded = !isMobile; checkExpand()"
     class="{{ accordion_class }} {{ color == 'light' ? 'accordion-light' : 'accordion-dark' }}"
     aria-labelledby="{{ accordionId }}">
    <div class="{{ accordion_title_class }}">
        <button type="button"
                @click="toggleExpanded()"
                class="flex justify-between items-center w-full md:cursor-text {{ accordion_button_class }}"
                :class="isMobile ? 'accordion-button py-3' : ''"
                :aria-expanded="expanded"
                aria-controls="{{ contentId }}"
                id="{{ accordionId }}"
        >
            <span class="flex flex-wrap gap-2 {{ accordion_label_class }}">
                {% if startIcon is defined and startIcon %}
                    <span aria-hidden="true">
                        {% render "@icons-" ~ startIcon.name with {size: startIcon.size, iconClass: startIcon.class}  %}
                    </span>
                {% endif %}
                {{ title }}
            </span>
            <span :class="expanded ? 'rotate-180' : ''" class="md:hidden transition-transform" aria-hidden="true">
                {% render "@icons-heroicons--chevron-down-mini" with { width:"24", height:"24"} %}
            </span>
        </button>
    </div>
    <div id="{{ contentId }}" x-cloak x-show="expanded || !isMobile" x-collapse
         class="{{ accordion_content_class }}"
    >
        <div class="pt-2" :class="isMobile ? 'pb-4' : ''">
            <div :class="isMobile ? 'pb-3' : ''">
                {% block content '' %}
                {{ content }}
            </div>
        </div>
    </div>
</div>
 
{
  "startIcon": {
    "name": "heroicons--map-pin-outline",
    "size": "24"
  },
  "title": "Accordion label",
  "content": "Accordion content"
}

No notes defined.