Etat Pur Design System

Accordion: Mobile Tablet 

<script>
    'use strict';

    function accordion(expanded = false) {
        return {
            expanded: expanded,
            isTablet: false,
            init() {
                this.checkExpand();
            },
            toggleExpanded() {
                this.expanded = !this.isTablet || !this.expanded;
            },
            checkExpand() {
                this.isTablet = window.innerWidth < 1024;
                // Initialize expanded to false so that it is closed by default.
                this.expanded = false
            }
        };
    }
</script>

<div x-data="accordion()" @resize.debounce.100.window="expanded = !isTablet; checkExpand()" class=" accordion-dark" aria-labelledby="accordion-1814943772">
    <div class="">
        <button type="button" @click="toggleExpanded()" class="flex justify-between items-center w-full lg:cursor-text " :class="isTablet ? 'accordion-button py-3' : ''" :aria-expanded="expanded" aria-controls="content-1760671354" id="accordion-1814943772">
            <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="lg: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 x-cloak x-show="expanded || !isTablet" x-collapse class="" id="content-1760671354">
        <div class="pt-2" :class="isTablet ? 'pb-4' : ''">
            <div :class="isTablet ? 'pb-3' : ''">
                Accordion content
            </div>
        </div>
    </div>
</div>
 
<script>
    'use strict';

    function accordion(expanded = false) {
        return {
            expanded: expanded,
            isTablet: false,
            init() {
                this.checkExpand();
            },
            toggleExpanded() {
                this.expanded = !this.isTablet || !this.expanded;
            },
            checkExpand() {
                this.isTablet = window.innerWidth < 1024;
                // Initialize expanded to false so that it is closed by default.
	            this.expanded = false
            }
        };
    }
</script>
{% set accordionId = "accordion-" ~ random() %}
{% set contentId = "content-" ~ random() %}

<div x-data="accordion({{ expanded }})"
     @resize.debounce.100.window="expanded = !isTablet; 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 lg:cursor-text {{ accordion_button_class }}"
                :class="isTablet ? '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="lg:hidden transition-transform" aria-hidden="true">
                {% render "@icons-heroicons--chevron-down-mini" with { width:"24", height:"24"} %}
            </span>
        </button>
    </div>
    <div x-cloak
         x-show="expanded || !isTablet"
         x-collapse
         class="{{ accordion_content_class }}"
         id="{{ contentId }}"
    >
        <div class="pt-2" :class="isTablet ? 'pb-4' : ''">
            <div :class="isTablet ? '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.