@php
    $accordionName = $name ?? 'accordionName';
    $sequence = $sequence ?? 1;
@endphp
<div class="">
    <button type="button" x-cloak @click="{{ $accordionName }} !== {{ $sequence }} ? {{ $accordionName }} = {{ $sequence }} : {{ $accordionName }} = null" class="com-accordion-button">
        {{ $accordionButton ?? 'Accordion Button' }}
    </button>

    <div class="relative overflow-hidden transition-all max-h-0 duration-300" style="" x-ref="{{ $accordionName.$sequence }}" x-bind:style="{{ $accordionName }} == {{ $sequence }} ? 'max-height: ' + $refs.{{ $accordionName.$sequence }}.scrollHeight + 'px!important' : ''">

        {{ $accordionContent ?? '' }}

    </div>
</div>