Collapse

<x-collapse title="Click to open">
    <p>Write the body content here.</p>
    <p class="mt-2 text-base-content/60">Any markup is allowed — it is a Blade slot.</p>
</x-collapse>

<div class="radius-box overflow-hidden border border-base-300 bg-base-100">
<input type="checkbox" id="collapse-29f48318" class="peer sr-only">
<label for="collapse-29f48318" class="flex w-full cursor-pointer select-none items-center justify-between gap-2 px-4 py-3 font-semibold"><span>Click to open</span></label>
<div class="grid grid-rows-[0fr] peer-checked:grid-rows-[1fr] transition-[grid-template-rows] duration-300 ease-in-out">
<div class="overflow-hidden">
<div class="px-4 pb-4 text-sm">
<p>
                    Write the body content here.
                </p>
<p class="mt-2 text-base-content/60">
                    Any markup is allowed — it is a Blade slot.
                </p>
</div>
</div>
</div>
</div>

<x-collapse title="No icon" :icon="null">
    <p>The chevron is suppressed.</p>
</x-collapse>
<x-collapse title="arrow icon" icon="arrow">
    <p>The arrow rotates on open.</p>
</x-collapse>
<x-collapse title="plus icon" icon="plus">
    <p>The plus turns into a minus.</p>
</x-collapse>

<div class="radius-box overflow-hidden border border-base-300 bg-base-100">
<input type="checkbox" id="collapse-45dfc754" class="peer sr-only">
<label for="collapse-45dfc754" class="flex w-full cursor-pointer select-none items-center justify-between gap-2 px-4 py-3 font-semibold"><span>No icon</span></label>
<div class="grid grid-rows-[0fr] peer-checked:grid-rows-[1fr] transition-[grid-template-rows] duration-300 ease-in-out">
<div class="overflow-hidden">
<div class="px-4 pb-4 text-sm">
<p>
                    The chevron is suppressed.
                </p>
</div>
</div>
</div>
</div>
<div class="radius-box overflow-hidden border border-base-300 bg-base-100">
<input type="checkbox" id="collapse-46dc8560" class="peer sr-only">
<label for="collapse-46dc8560" class="flex w-full cursor-pointer select-none items-center justify-between gap-2 px-4 py-3 font-semibold peer-checked:[&amp;&gt;svg]:rotate-180"><span>arrow icon</span>
<svg class="w-4 h-4 shrink-0 transition-transform duration-300" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></label>
<div class="grid grid-rows-[0fr] peer-checked:grid-rows-[1fr] transition-[grid-template-rows] duration-300 ease-in-out">
<div class="overflow-hidden">
<div class="px-4 pb-4 text-sm">
<p>
                    The arrow rotates on open.
                </p>
</div>
</div>
</div>
</div>
<div class="radius-box overflow-hidden border border-base-300 bg-base-100">
<input type="checkbox" id="collapse-6dbc03f9" class="peer sr-only">
<label for="collapse-6dbc03f9" class="flex w-full cursor-pointer select-none items-center justify-between gap-2 px-4 py-3 font-semibold peer-checked:[&amp;_.cc-bar-v]:scale-y-0"><span>plus icon</span>
<span class="relative inline-block h-4 w-4 shrink-0"><span class="cc-bar-h absolute inset-0 m-auto h-0.5 w-4 bg-current"></span>
<span class="cc-bar-v absolute inset-0 m-auto h-4 w-0.5 bg-current transition-transform duration-300"></span></span></label>
<div class="grid grid-rows-[0fr] peer-checked:grid-rows-[1fr] transition-[grid-template-rows] duration-300 ease-in-out">
<div class="overflow-hidden">
<div class="px-4 pb-4 text-sm">
<p>
                    The plus turns into a minus.
                </p>
</div>
</div>
</div>
</div>

<x-collapse title="Start open" :open="true">
    <p>Rendered already expanded.</p>
</x-collapse>

<div class="radius-box overflow-hidden border border-base-300 bg-base-100">
<input type="checkbox" id="collapse-2ae09053" class="peer sr-only" checked>
<label for="collapse-2ae09053" class="flex w-full cursor-pointer select-none items-center justify-between gap-2 px-4 py-3 font-semibold"><span>Start open</span></label>
<div class="grid grid-rows-[0fr] peer-checked:grid-rows-[1fr] transition-[grid-template-rows] duration-300 ease-in-out">
<div class="overflow-hidden">
<div class="px-4 pb-4 text-sm">
<p>
                    Rendered already expanded.
                </p>
</div>
</div>
</div>
</div>

<x-collapse title="bordered=false" :bordered="false">
    <p>No frame — useful inside a card that already has one.</p>
</x-collapse>

<div class="radius-box overflow-hidden bg-base-100">
<input type="checkbox" id="collapse-76f0b10a" class="peer sr-only">
<label for="collapse-76f0b10a" class="flex w-full cursor-pointer select-none items-center justify-between gap-2 px-4 py-3 font-semibold"><span>bordered=false</span></label>
<div class="grid grid-rows-[0fr] peer-checked:grid-rows-[1fr] transition-[grid-template-rows] duration-300 ease-in-out">
<div class="overflow-hidden">
<div class="px-4 pb-4 text-sm">
<p>
                    No frame — useful inside a card that already has one.
                </p>
</div>
</div>
</div>
</div>

<x-collapse>
    <x-slot:titleSlot>
        <span class="font-bold">HTML-based</span> title
    </x-slot:titleSlot>
    <p>Use titleSlot when the heading needs markup.</p>
</x-collapse>

<div class="radius-box overflow-hidden border border-base-300 bg-base-100">
<input type="checkbox" id="collapse-6d0c322a" class="peer sr-only">
<label for="collapse-6d0c322a" class="flex w-full cursor-pointer select-none items-center justify-between gap-2 px-4 py-3 font-semibold"><span><span class="font-bold">HTML-based</span> title</span></label>
<div class="grid grid-rows-[0fr] peer-checked:grid-rows-[1fr] transition-[grid-template-rows] duration-300 ease-in-out">
<div class="overflow-hidden">
<div class="px-4 pb-4 text-sm">
<p>
                    Use titleSlot when the heading needs markup.
                </p>
</div>
</div>
</div>
</div>