@props([
    'itemid',
    'head',
    'expanded' => 'false',
    'body',
])

<button type="button" class="flex items-center justify-between w-full p-2 font-medium text-left text-gray-500 dark:text-gray-400 dark:hover:bg-gray-800" data-accordion-target="#{{ $itemid }}" aria-expanded="{{ $expanded }}" aria-controls="{{ $itemid }}">
    {{ $head }}
    <svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path
            fill-rule="evenodd"
            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
            clip-rule="evenodd"
        ></path>
    </svg>
</button>
<div id="{{ $itemid }}" {{ $body->attributes->class(['hidden']) }}>
    {{ $body }}
</div>