v2 beta docs. Upgrade guide Back to v1
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 separator>
    <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 and alternative icon

How ...
Are you?
<x-collapse collapse-plus-minus>
    <x-slot:heading class="bg-warning/20">
        How ...
    </x-slot:heading>
    <x-slot:content class="bg-primary/10">
        <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';
Made with by Robson Tenório and contributors.