Accordions

<x-lb.element.accordion>
    <x-lb.element.accordion.group label="Why did Laravel go to the party?">
        Because it heard the models were eloquent.
    </x-lb.element.accordion.group>
    <x-lb.element.accordion.group label="Why don't Laravel developers play hide and seek?">
        Because they always return to the view.
    </x-lb.element.accordion.group>
    <x-lb.element.accordion.group label="Why is a Laravel developer's favorite music album always 'Blade'? ">
        Because it's full of views that never get old.
    </x-lb.element.accordion.group>
</x-lb.element.accordion>

@props(['class' => ''])
 
<div x-data="{
    activeAccordion: '',
    mergedClasses: twMerge('relative w-full mx-auto overflow-hidden text-sm font-normal bg-white border border-neutral-200 divide-y divide-neutral-200 rounded-md', '{{ $class }}'),
    setActiveAccordion(id) {
        this.activeAccordion = (this.activeAccordion == id) ? '' : id
    }
}" :class="mergedClasses">
    {{ $slot }}
</div>

@props([
    'label' => 'Accordion Label',
])
 
<div x-data="{ id: $id('accordion') }" class="cursor-pointer group">
    <button @click="setActiveAccordion(id)"
        class="flex items-center justify-between w-full p-4 text-left select-none group-hover:underline">
        <span>{{ $label }}</span>
 
        <div class="duration-200 ease-out" :class="{ 'rotate-180': activeAccordion == id }">
            <x-lb.heroicon.o-chevron-down class="w-4 h-4 " />
        </div>
    </button>
 
    <div x-show="activeAccordion==id" x-collapse style="display:none">
        <div class="p-4 pt-0 text-neutral-500">
            {{ $slot }}
        </div>
    </div>
 
</div>