Collapse (Disclosure)

Basic example

Collapses are built using the x-collapse, x-collapse-trigger and x-collapse-content components.

<x-collapse>
    <x-collapse-trigger>
        ...
    </x-collapse-trigger>

    <x-collapse-content>
        ...
    </x-collapse-content>
</x-collapse>

Default open state

The collapse component accepts an opened prop, which, when used, makes the collapse' content visible by default.

<x-collapse opened>
    <x-collapse-trigger>
        ...
    </x-collapse-trigger>

    <x-collapse-content>
        ...
    </x-collapse-content>
</x-collapse>