You can group multiple Collapse components by wrapping it with an Accordion component.
| Property | Type | Description |
|---|---|---|
| id | ?string | A unique identifier. |
| no-join | bool | If enabled each collapse has it's own rounded corners. [default=false] |
This component basically just groups the Collapse component, preventing more than one collapse from being open at the same time.
Group 1
Hello 1
Group 2
Hello 2
Group 3
Hello 3
<c-accordion wire:model.live="default">
<c-collapse name="default1">
<c-slot:heading>Group 1</c-slot:heading>
<c-slot:content>Hello 1</c-slot:content>
</c-collapse>
<c-collapse name="default2">
<c-slot:heading>Group 2</c-slot:heading>
<c-slot:content>Hello 2</c-slot:content>
</c-collapse>
<c-collapse name="default3">
<c-slot:heading>Group 3</c-slot:heading>
<c-slot:content>Hello 3</c-slot:content>
</c-collapse>
</c-accordion>
Current value: default1
Group 1
Hello 1
Group 2
Hello 2
Group 3
Hello 3
<c-accordion wire:model="noJoin" no-join class="flex flex-col gap-4">
<c-collapse name="noJoin1">
<c-slot:heading>Group 1</c-slot:heading>
<c-slot:content>Hello 1</c-slot:content>
</c-collapse>
<c-collapse name="noJoin2">
<c-slot:heading>Group 2</c-slot:heading>
<c-slot:content>Hello 2</c-slot:content>
</c-collapse>
<c-collapse name="noJoin3">
<c-slot:heading>Group 3</c-slot:heading>
<c-slot:content>Hello 3</c-slot:content>
</c-collapse>
</c-accordion>