APA Component Library

Accordion 

<div x-data="{ activeAccordion: null }">

    <div x-data="{ id: 1 }" class=" mb-6 transition" :class="activeAccordion === id ? 'bg-gray-700' : 'bg-gray-100'">
        <button @click="activeAccordion = activeAccordion === id ? null : id" :aria-expanded="activeAccordion" aria-controls="accordion-panel-1" class="button group-aria-expanded:button-active font-bold flex items-center justify-between text-left w-full py-7 px-5 text-sm transition lg:px-10 xl:text-lg" :class="activeAccordion === id ? 'text-white' : 'text-gray-700'" id="accordion-header-1">
            <span class="mr-5 lg:mr-10">
                Gibt es bestimmte Zertifizierungen, die eingehalten werden müssen?
            </span>
            <span class="flex items-center justify-center">
                <span class="flex items-center justify-center" :class="{ '!hidden': activeAccordion === id }">

                    <span class="inline-flex items-center w-4 h-4     ">
                        <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.73 22.73">
                            <path id="b" d="m.75,11.36h21.23M11.36.75v21.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                        </svg>
                    </span>

                </span>
                <span class="items-center justify-center hidden" :class="{ '!flex': activeAccordion === id }">

                    <span class="inline-flex items-center w-4 h-4     ">
                        <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="22.73" height="1.5" viewBox="0 0 22.73 1.5">
                            <path id="b" d="m.75.75h21.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                        </svg>
                    </span>

                </span>
            </span>
        </button>

        <div x-cloak x-show="activeAccordion == id" x-collapse id="accordion-panel-1" aria-labelledby="accordion-header-1">
            <div class="py-7 px-5 pt-0 text-sm lg:px-10 max-w-[90%]" :class="activeAccordion === id ? 'text-white' : 'text-gray-700'">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
            </div>
        </div>
    </div>

    <div x-data="{ id: 2 }" class=" mb-6 transition" :class="activeAccordion === id ? 'bg-gray-700' : 'bg-gray-100'">
        <button @click="activeAccordion = activeAccordion === id ? null : id" :aria-expanded="activeAccordion" aria-controls="accordion-panel-2" class="button group-aria-expanded:button-active font-bold flex items-center justify-between text-left w-full py-7 px-5 text-sm transition lg:px-10 xl:text-lg" :class="activeAccordion === id ? 'text-white' : 'text-gray-700'" id="accordion-header-2">
            <span class="mr-5 lg:mr-10">
                Gibt es bestimmte Zertifizierungen, die eingehalten werden müssen?
            </span>
            <span class="flex items-center justify-center">
                <span class="flex items-center justify-center" :class="{ '!hidden': activeAccordion === id }">

                    <span class="inline-flex items-center w-4 h-4     ">
                        <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.73 22.73">
                            <path id="b" d="m.75,11.36h21.23M11.36.75v21.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                        </svg>
                    </span>

                </span>
                <span class="items-center justify-center hidden" :class="{ '!flex': activeAccordion === id }">

                    <span class="inline-flex items-center w-4 h-4     ">
                        <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="22.73" height="1.5" viewBox="0 0 22.73 1.5">
                            <path id="b" d="m.75.75h21.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                        </svg>
                    </span>

                </span>
            </span>
        </button>

        <div x-cloak x-show="activeAccordion == id" x-collapse id="accordion-panel-2" aria-labelledby="accordion-header-2">
            <div class="py-7 px-5 pt-0 text-sm lg:px-10 max-w-[90%]" :class="activeAccordion === id ? 'text-white' : 'text-gray-700'">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
            </div>
        </div>
    </div>

    <div x-data="{ id: 3 }" class=" mb-6 transition" :class="activeAccordion === id ? 'bg-gray-700' : 'bg-gray-100'">
        <button @click="activeAccordion = activeAccordion === id ? null : id" :aria-expanded="activeAccordion" aria-controls="accordion-panel-3" class="button group-aria-expanded:button-active font-bold flex items-center justify-between text-left w-full py-7 px-5 text-sm transition lg:px-10 xl:text-lg" :class="activeAccordion === id ? 'text-white' : 'text-gray-700'" id="accordion-header-3">
            <span class="mr-5 lg:mr-10">
                Gibt es bestimmte Zertifizierungen, die eingehalten werden müssen?
            </span>
            <span class="flex items-center justify-center">
                <span class="flex items-center justify-center" :class="{ '!hidden': activeAccordion === id }">

                    <span class="inline-flex items-center w-4 h-4     ">
                        <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.73 22.73">
                            <path id="b" d="m.75,11.36h21.23M11.36.75v21.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                        </svg>
                    </span>

                </span>
                <span class="items-center justify-center hidden" :class="{ '!flex': activeAccordion === id }">

                    <span class="inline-flex items-center w-4 h-4     ">
                        <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="22.73" height="1.5" viewBox="0 0 22.73 1.5">
                            <path id="b" d="m.75.75h21.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                        </svg>
                    </span>

                </span>
            </span>
        </button>

        <div x-cloak x-show="activeAccordion == id" x-collapse id="accordion-panel-3" aria-labelledby="accordion-header-3">
            <div class="py-7 px-5 pt-0 text-sm lg:px-10 max-w-[90%]" :class="activeAccordion === id ? 'text-white' : 'text-gray-700'">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
            </div>
        </div>
    </div>

</div>
 
{% set items = items %}
{% set firstOpen = firstOpen %}

{% if items %}
    <div x-data="{ activeAccordion: null }">
        {% for item in items %}
            <div x-data="{ id: {{ loop.index }} }" class="{{ classes }} mb-6 transition" :class="activeAccordion === id ? 'bg-gray-700' : 'bg-gray-100'">
                <button
                        @click="activeAccordion = activeAccordion === id ? null : id"
                        :aria-expanded="activeAccordion"
                        aria-controls="accordion-panel-{{ loop.index }}"
                        class="button group-aria-expanded:button-active font-bold flex items-center justify-between text-left w-full py-7 px-5 text-sm transition lg:px-10 xl:text-lg"
                        :class="activeAccordion === id ? 'text-white' : 'text-gray-700'"
                        id="accordion-header-{{ loop.index }}"
                >
                    <span class="mr-5 lg:mr-10">
                        {{ item.title }}
                    </span>
                    <span class="flex items-center justify-center">
                        <span class="flex items-center justify-center" :class="{ '!hidden': activeAccordion === id }">
                            {% render "@icon" with {
                                name: 'plus',
                                size: 'sm'
                            } %}
                        </span> 
                        <span class="items-center justify-center hidden" :class="{ '!flex': activeAccordion === id }">
                            {% render "@icon" with {
                                name: 'minus',
                                size: 'sm'
                            } %}
                        </span>
                    </span>
                </button>

                <div
                    x-cloak x-show="activeAccordion == id" x-collapse
                    id="accordion-panel-{{ loop.index }}"
                    aria-labelledby="accordion-header-{{ loop.index }}"
                >
                    <div class="py-7 px-5 pt-0 text-sm lg:px-10 max-w-[90%]" :class="activeAccordion === id ? 'text-white' : 'text-gray-700'">
                        {{ item.content }}
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% endif %}
 
{
  "items": [
    {
      "id": 1,
      "title": "Gibt es bestimmte Zertifizierungen, die eingehalten werden müssen?",
      "content": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et"
    },
    {
      "id": 2,
      "title": "Gibt es bestimmte Zertifizierungen, die eingehalten werden müssen?",
      "content": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et"
    },
    {
      "id": 3,
      "title": "Gibt es bestimmte Zertifizierungen, die eingehalten werden müssen?",
      "content": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et"
    }
  ]
}

No notes defined.