Accordion

Accordion component.

Accordion, Customization Blocks

Example:

// AppServiceProvider, "boot" method.
 
TallStackUi::customize()
    ->accordion()
    ->block('block', 'classes');

Accordion Items, Customization Blocks

Example:

// AppServiceProvider, "boot" method.
 
TallStackUi::customize()
    ->accordion('items')
    ->block('block', 'classes');

# Basic Usage

A suite of Blade components for the TALL stack.

Laravel 10, 11, 12, and 13.

Yes, TallStackUI is free and open source.

<x-accordion>
    <x-accordion.items title="What is TallStackUI?" id="faq-1">
        A suite of Blade components for the TALL stack.
    </x-accordion.items>
    <x-accordion.items title="Which Laravel versions are supported?" id="faq-2">
        Laravel 10, 11, 12, and 13.
    </x-accordion.items>
    <x-accordion.items title="Is it free?" id="faq-3">
        Yes, TallStackUI is free and open source.
    </x-accordion.items>
</x-accordion>

# Multiple Open

Stays open independently.

<x-accordion multiple> 
    <x-accordion.items title="Feature A" id="multi-a">
        Stays open independently.
    </x-accordion.items>
    <x-accordion.items title="Feature B" id="multi-b">
        Stays open independently.
    </x-accordion.items>
    <x-accordion.items title="Feature C" id="multi-c">
        Stays open independently.
    </x-accordion.items>
</x-accordion>

# Flat Variation

Without the outer border, rounding, and shadow.

Only the inter-item separator remains.

<x-accordion flat> 
    <x-accordion.items title="First" id="flat-1">
        Without the outer border, rounding, and shadow.
    </x-accordion.items>
    <x-accordion.items title="Second" id="flat-2">
        Only the inter-item separator remains.
    </x-accordion.items>
</x-accordion>

# Chevron Position

The chevron sits at the end of the trigger.

The chevron sits before the title.

<!-- Default: chevron on the right -->
<x-accordion>
    <x-accordion.items title="Right chevron (default)" id="chev-right">
        The chevron sits at the end of the trigger.
    </x-accordion.items>
</x-accordion>
 
<!-- Chevron on the left -->
<x-accordion chevron="left"> 
    <x-accordion.items title="Left chevron" id="chev-left">
        The chevron sits before the title.
    </x-accordion.items>
</x-accordion>

# Default Open

Content

Ships expanded on page load.

<x-accordion>
    <x-accordion.items title="Closed by default" id="default-closed">
        Content
    </x-accordion.items>
    <x-accordion.items title="Open by default" id="default-opened" open> 
        Ships expanded on page load.
    </x-accordion.items>
</x-accordion>

# Custom Icon

The icon still rotates 180° when the item opens.

Any Heroicon name is accepted.

<x-accordion>
    <x-accordion.items title="Using plus-circle"
                       id="icon-plus"
                       icon="plus-circle"> 
        The icon still rotates 180° when the item opens.
    </x-accordion.items>
    <x-accordion.items title="Using bell"
                       id="icon-bell"
                       icon="bell">
        Any Heroicon name is accepted.
    </x-accordion.items>
</x-accordion>

# Icon Slot

The slot HTML is emitted as-is. Rotation is not applied automatically.

<x-accordion>
    <x-accordion.items title="Custom indicator" id="icon-slot-1">
        <x-slot:icon> 
            <span class="rounded-full bg-primary-100 px-2 py-0.5 text-xs font-semibold text-primary-700">
                new
            </span>
        </x-slot:icon>
        The slot HTML is emitted as-is. Rotation is not applied automatically.
    </x-accordion.items>
</x-accordion>

# Trigger Slot

A slot to replace the trigger label entirely with rich content like avatars, badges, or multi-line headings.

Profile details, contact info, recent activity.

<x-accordion>
    <x-accordion.items id="user-1">
        <x-slot:trigger> 
            <div class="flex items-center gap-3">
                <x-avatar sm color="primary" text="JD" />
                <div class="flex flex-col text-start">
                    <span class="text-sm font-semibold">John Doe</span>
                    <span class="text-xs text-gray-500">Product Manager</span>
                </div>
                <x-badge color="green" sm text="active" class="ms-auto" />
            </div>
        </x-slot:trigger>
        Profile details, contact info, recent activity.
    </x-accordion.items>
</x-accordion>

Accordion dispatches open and close CustomEvents on the wrapper, with the triggered item's identifier in $event.detail.id . Listen with x-on:open and x-on:close directly on the <x-accordion> or any ancestor.

Trigger this item to see the events firing.

Each open / close dispatches a CustomEvent with detail.id.

<x-accordion x-on:open="alert(`Opened: ${$event.detail.id}`)" x-on:close="alert(`Closed: ${$event.detail.id}`)">
    <x-accordion.items title="Watch me" id="evt-1">
        Trigger this item to see the events firing.
    </x-accordion.items>
    <x-accordion.items title="Or watch me" id="evt-2">
        Each open / close dispatches a CustomEvent with detail.id.
    </x-accordion.items>
</x-accordion>