new
Livewire Volt extension for VSCode. Voltage →
maryUI

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