<x-collapse>
    <x-slot:heading>
        Hello
    </x-slot:heading>
    <x-slot:content>
        You!
    </x-slot:content>
</x-collapse>

<x-collapse wire:model="show" separator class="bg-base-200">
    <x-slot:heading>Hey</x-slot:heading>
    <x-slot:content>There!</x-slot:content>
</x-collapse>

<x-collapse collapse-plus-minus>
    <x-slot:heading class="!bg-blue-50 italic text-red-500">
        How ...
    </x-slot:heading>
    <x-slot:content class="!bg-blue-100">
        <div class="mt-5">Are you?</div>
    </x-slot:content>
</x-collapse>

<x-accordion wire:model="group">
    <x-collapse name="group1">
        <x-slot:heading>Group 1</x-slot:heading>
        <x-slot:content>Hello 1</x-slot:content>
    </x-collapse>
    <x-collapse name="group2">
        <x-slot:heading>Group 2</x-slot:heading>
        <x-slot:content>Hello 2</x-slot:content>
    </x-collapse>
    <x-collapse name="group3">
        <x-slot:heading>Group 3</x-slot:heading>
        <x-slot:content>Hello 3</x-slot:content>
    </x-collapse>
</x-accordion>

public string $group = 'group1';