Alain Afflelou 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=" text-neutral-800">
    <h2 class="font-semibold">
        <button type="button" @click="toggleExpanded()" class="flex justify-between items-center w-full md:cursor-text">
            Accordion title
            <div class="md:hidden transition-transform" :class="{ 'rotate-180': expanded }">
                <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
                </svg>
            </div>
        </button>
    </h2>
    <div x-cloak x-show="expanded || !isMobile" x-collapse class="pt-6">
        Accordion content
    </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>

<div
        x-data="accordion({{ expanded }})"
        @resize.debounce.100.window="expanded = !isMobile;checkExpand()"
        class="{{ accordion_class }} {{ color == 'light' ? 'text-light-white' : 'text-neutral-800' }}"
>
    <h2 class="{{ accordion_title_class | default('font-semibold') }}">
        <button
                type="button"
                @click="toggleExpanded()"
                class="flex justify-between items-center w-full md:cursor-text"
        >
            {{ title }}
            <div class="md:hidden transition-transform" :class="{ 'rotate-180': expanded }">
                {% render "@icons-library--chevron-bottom" %}
            </div>
        </button>
    </h2>
    <div
            x-cloak
            x-show="expanded || !isMobile"
            x-collapse
            class="{{ accordion_content_class | default('pt-6') }}"
    >
        {% block content '' %}
        {{ content }}
    </div>
</div>
 
{
  "title": "Accordion title",
  "content": "Accordion content"
}

Accordion guide

How to use

Import

{% embed "@accordion" with {...} %}
    {% block content %}
        ...
    {% endblock %}
{% endembed %}

{% embed "@accordion--mobile-only" with {...} %}
  {% block content %}
  ...
  {% endblock %}
{% endembed %}

Available props

  • title: string | default: Accordion title
  • accordion_class: string | default: null
  • accordion_content_class: string | default: null
  • accordion_title_class: string | default: null
  • expanded: boolean | default: false
  • content: string | default: null | (prefer using the content block via embed)

Available blocks (for embed)

  • content : Add content to the accordion