Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Artisan UI is a set of styled laravel blade components that takes inspiration from shadCN.

It is built using Laravel blade, tailwind CSS, and alpine JS.

Yes. A lot of code was borrowed from Pines UI, and some ideas were gotten from Mary UI.
Component Code 
<x-aui::accordion type="single" collapsible class="w-full md:w-[70%]">
    <x-aui::accordion-item>
        <x-slot:trigger>What is Artisan UI</x-slot:trigger>
        <x-slot:content>
            Artisan UI is a set of styled laravel blade components
            that takes inspiration from shadCN.
        </x-slot:content>
    </x-aui::accordion-item>
    <x-aui::accordion-item>
        <x-slot:trigger>What Technology is it built with?</x-slot:trigger>
        <x-slot:content>
            It is built using Laravel blade, tailwind CSS, and alpine JS.
        </x-slot:content>
    </x-aui::accordion-item>
    <x-aui::accordion-item>
        <x-slot:trigger>Did any other library inspire this project?</x-slot:trigger>
        <x-slot:content>
            Yes. A lot of code was borrowed from Pines UI, and some
            ideas were gotten from Mary UI.
        </x-slot:content>
    </x-aui::accordion-item>
</x-aui::accordion>

When type attribute is set to single, the collapsible attribute allows the currently opened accordion item to be closed

When the type attribute is set to multiple, multiple items can be opened at once.

Artisan UI is a set of styled laravel blade components that takes inspiration from shadCN.

It is built using Laravel blade, tailwind CSS, and alpine JS.

Yes. A lot of code was borrowed from Pines UI, and some ideas were gotten from Mary UI.
Component Code 
<x-aui::accordion type="multiple" class="w-full md:w-[70%]">
    <x-aui::accordion-item>
        <x-slot:trigger>What is Artisan UI</x-slot:trigger>
        <x-slot:content>
            Artisan UI is a set of styled laravel blade components
            that takes inspiration from shadCN.
        </x-slot:content>
    </x-aui::accordion-item>
    <x-aui::accordion-item>
        <x-slot:trigger>What Technology is it built with?</x-slot:trigger>
        <x-slot:content>
            It is built using Laravel blade, tailwind CSS, and alpine JS.
        </x-slot:content>
    </x-aui::accordion-item>
    <x-aui::accordion-item>
        <x-slot:trigger>Did any other library inspire this project?</x-slot:trigger>
        <x-slot:content>
            Yes. A lot of code was borrowed from Pines UI,
            and some ideas were gotten from Mary UI.
        </x-slot:content>
    </x-aui::accordion-item>
</x-aui::accordion>

You can listen for the valueChanged event containing with the current active value in $event.detail.value, which is an array when type is multiple and a string when type is single. The value of an accordion item is accordion-item-{index}