Accordeon

Basic example

Accordeons are built using the x-accordeon, x-accordeon-item, x-accordeon-trigger and x-accordeon-content components. The x-accordeon-item, x-accordeon-trigger and x-accordeon-content components simply extends their collapse counter part.

<x-accordeon>
    <x-accordeon-item opened>
        <h3>
            <x-accordeon-trigger>
                ...
            </x-accordeon-trigger>
        </h3>

        <x-accordeon-content>
            ...
        </x-accordeon-content>
    </x-accordeon-item>

    <x-accordeon-item>
        <h3>
            <x-accordeon-trigger>
                ...
            </x-accordeon-trigger>
        </h3>

        <x-accordeon-content>
            ...
        </x-accordeon-content>
    </x-accordeon-item>
</x-accordeon>

With only one opened at a time

The accordeon component accepts a single prop, which, when used, determines whether the component should allow multiple "items" opened at the same time or not.

<x-accordeon single>
    <x-accordeon-item>
        <h3>
            <x-accordeon-trigger>
                ...
            </x-accordeon-trigger>
        </h3>

        <x-accordeon-content>
            ...
        </x-accordeon-content>
    </x-accordeon-item>

    <x-accordeon-item>
        <h3>
            <x-accordeon-trigger>
                ...
            </x-accordeon-trigger>
        </h3>

        <x-accordeon-content>
            ...
        </x-accordeon-content>
    </x-accordeon-item>
</x-accordeon>