Collapsible

An interactive component which expands/collapses a panel. Requires Alpine.js.

Usage

3 starred repositories

electrik/slate

electrik/core

laravel/framework

example.blade.php

<x-slate::collapsible class="w-full max-w-sm space-y-2">
    <div class="flex items-center justify-between gap-4 rounded-lg border px-4 py-3">
        <h4 class="text-sm font-medium">3 starred repositories</h4>
        <x-slate::collapsible-trigger class="inline-flex size-8 items-center justify-center rounded-md hover:bg-muted">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4" aria-hidden="true">
                <path d="m6 9 6 6 6-6" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
            <span class="sr-only">Toggle</span>
        </x-slate::collapsible-trigger>
    </div>
    <x-slate::collapsible-content class="space-y-2">
        <div class="rounded-lg border px-4 py-2 text-sm">electrik/slate</div>
        <div class="rounded-lg border px-4 py-2 text-sm">electrik/core</div>
        <div class="rounded-lg border px-4 py-2 text-sm">laravel/framework</div>
    </x-slate::collapsible-content>
</x-slate::collapsible>

<x-slate::collapsible class="w-full max-w-sm space-y-2">
    <div class="flex items-center justify-between gap-4 rounded-lg border px-4 py-3">
        <h4 class="text-sm font-medium">3 starred repositories</h4>
        <x-slate::collapsible-trigger class="inline-flex size-8 items-center justify-center rounded-md hover:bg-muted">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4" aria-hidden="true">
                <path d="m6 9 6 6 6-6" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
            <span class="sr-only">Toggle</span>
        </x-slate::collapsible-trigger>
    </div>
    <x-slate::collapsible-content class="space-y-2">
        <div class="rounded-lg border px-4 py-2 text-sm">electrik/slate</div>
        <div class="rounded-lg border px-4 py-2 text-sm">electrik/core</div>
        <div class="rounded-lg border px-4 py-2 text-sm">laravel/framework</div>
    </x-slate::collapsible-content>
</x-slate::collapsible>

Composition

code

Collapsible
├── CollapsibleTrigger
└── CollapsibleContent

Collapsible
├── CollapsibleTrigger
└── CollapsibleContent

Open by default

Yes. Free for personal and commercial projects.

example.blade.php

<x-slate::collapsible :open="true" class="w-full max-w-sm space-y-2">
    <x-slate::collapsible-trigger class="flex w-full items-center justify-between rounded-lg border px-4 py-3 text-sm font-medium">
        Can I use this in my project?
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4" aria-hidden="true">
            <path d="m6 9 6 6 6-6" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
    </x-slate::collapsible-trigger>
    <x-slate::collapsible-content class="rounded-lg border px-4 py-3 text-sm text-muted-foreground">
        Yes. Free for personal and commercial projects.
    </x-slate::collapsible-content>
</x-slate::collapsible>

<x-slate::collapsible :open="true" class="w-full max-w-sm space-y-2">
    <x-slate::collapsible-trigger class="flex w-full items-center justify-between rounded-lg border px-4 py-3 text-sm font-medium">
        Can I use this in my project?
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4" aria-hidden="true">
            <path d="m6 9 6 6 6-6" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
    </x-slate::collapsible-trigger>
    <x-slate::collapsible-content class="rounded-lg border px-4 py-3 text-sm text-muted-foreground">
        Yes. Free for personal and commercial projects.
    </x-slate::collapsible-content>
</x-slate::collapsible>