Collapse

This component can be used for showing and hiding content.

Property	Type	Description
id	?string	A unique identifier.
name	bool	When used inside of an Accordion this will define the select value.
without-arrows	bool	If the arrow buttons should be hidden or not. [default=false]
autoplay	bool	If the images should automatically loop. [default=false]
interval	?int	How long (ms) to show each image for when $autoplay is enabled. [default=2000]

You can wrap multiple collapse components by using the Accordion component.

Content

Hello

World

Hello

World

{{-- Plain text --}}
<c-collapse heading="Hello" content="World" />

{{-- Slot --}}
<c-collapse>
    <c-slot:heading>
        Hello
    </c-slot:heading>
    <c-slot:content>
        World
    </c-slot:content>
</c-collapse>

wire:model

Hey

<c-collapse wire:model="show" separator progress-indicator>
    <c-slot:heading>Hey</c-slot:heading>
    <c-slot:content>
        <c-button label="Test" wire:click="sleep" icon-right="check" spinner />
    </c-slot:content>
</c-collapse>

Style

How ...

Are you?

<c-collapse collapse-plus-minus open class="rounded-box overflow-clip">
    <c-slot:heading class="bg-accent text-accent-content">
        How ...
    </c-slot:heading>
    <c-slot:content class="bg-accent/25 text-base-content">
        <div class="mt-5">Are you?</div>
    </c-slot:content>
</c-collapse>

No icon

How...

... are you?

<c-collapse no-icon separator heading="How..." content="... are you?" />