EUIKit

Accordion

Use the accordion components to show folds of content that can hide or reveal additional content. Only one of the accordion "folds" can be visible at a time. Clicking on a closed "fold" will open it and close the others. Clicking on an open "fold" will hide all folds.

The accordion component uses AlpineJS (included with Livewire 3) for interactivity.

The accordion is made up of two components. First, the <x::euikit::accordion> component acts as a wrapper around all the accordion folds. The <x-euikit:accordion.fold> component sets up the individual folds. It takes a title attribute that is used as the heading for the rest of the content.

Accordion Demo

This is the heading for fold 1

This is the content for fold one. There is a lot of content here, which will roll down when the heading is clicked, and roll back up with either the heading is clicked again, or another heading is clicked. The Accordion component shows only one "fold" at a time.

This is the heading for fold 2

This is the content for fold two.

This is the heading for fold 3

This is the content for fold three.

Example code


<x-e::accordion>
    <x-e::accordion.fold title="This is the heading for fold 1">
        <p>
            This is the content for fold one. There is a lot of content here, which will roll
            down when the heading is clicked, and roll back up with either the heading is
            clicked again, or another heading is clicked. The Accordion component shows only one
            "fold" at a time.
        </p>
    </x-e::accordion.fold>
    <x-e::accordion.fold title="This is the heading for fold 2">
        <p>This is the content for fold two.</p>
    </x-e::accordion.fold>
    <x-e::accordion.fold title="This is the heading for fold 3">
        <p>This is the content for fold three.</p>
    </x-e::accordion.fold>
</x-e::accordion>