Collapse

This component can be used for showing and hiding content. It can be used standalone or wrapped into the "Accordion" component.

Basic

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

Livewire

Hey

There!
<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>

Style

How ...
Are you?
<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>

No icon

How ...
Are you ?
<x-collapse no-icon>
<x-slot:heading>
How ...
</x-slot:heading>
<x-slot:content>
Are you ?
</x-slot:content>
</x-collapse>

Accordion

You can group multiple x-collapse by wrapping it on a x-accordion component.

Group 1
Hello 1
Group 2
Hello 2
Group 3
Hello 3
<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';

maryUI
Sponsor