34 lines
683 B
PHP
34 lines
683 B
PHP
@props(['title' => ''])
|
|
|
|
<div
|
|
x-data="{
|
|
id: $id('accordion'),
|
|
isOpen: false
|
|
}"
|
|
x-init="
|
|
isOpen = $parent.isMultiple
|
|
? $parent.active.includes(id)
|
|
: $parent.active === id;
|
|
$watch('$parent.active', value => {
|
|
isOpen = $parent.isMultiple
|
|
? value.includes(id)
|
|
: value === id;
|
|
});
|
|
"
|
|
{{ $attributes->merge(['class' => 'border rounded-lg']) }}
|
|
>
|
|
<button
|
|
@click="$parent.toggleItem(id)"
|
|
class="w-full px-4 py-3 text-left bg-gray-100 hover:bg-gray-200 transition-colors"
|
|
>
|
|
{{ $title }}
|
|
</button>
|
|
|
|
<div
|
|
x-show="isOpen"
|
|
x-collapse
|
|
class="p-4 bg-white"
|
|
>
|
|
{{ $slot }}
|
|
</div>
|
|
</div> |