Skip to content

Overview

The <x-aura::collapsible> component provides an expandable/collapsible content area with smooth height transitions. It supports a customizable trigger slot and can be set to open by default. Useful for FAQs, expandable sections, and progressive disclosure patterns.

Basic Usage

This content can be shown or hidden by clicking the trigger above.

<x-aura::collapsible>
    <x-slot:trigger>
        <x-aura::button variant="outline">Toggle Content</x-aura::button>
    </x-slot:trigger>

    <p class="p-4">This content can be shown or hidden by clicking the trigger.</p>
</x-aura::collapsible>

Props

Prop Type Default Description
open bool false Whether the content is expanded by default.

Slots

Slot Description
Default The collapsible content area.
trigger The clickable element that toggles the content visibility.

Variants / Examples

Default Open

This section starts expanded and can be collapsed by clicking the trigger.

<x-aura::collapsible :open="true">
    <x-slot:trigger>
        <x-aura::button variant="ghost">Click to Collapse</x-aura::button>
    </x-slot:trigger>

    <div class="p-4 bg-aura-surface-50 rounded-lg">
        <p>This section starts expanded.</p>
    </div>
</x-aura::collapsible>

FAQ Style

What is Aura UI?

Aura UI is a Blade component library for Laravel, built with Tailwind CSS and Alpine.js.

Is it free?

Yes, the core library is completely free and open source.

Does it support dark mode?

Yes, all components support both light and dark mode out of the box.

<div class="space-y-2">
    @foreach($faqs as $faq)
        <x-aura::collapsible>
            <x-slot:trigger>
                <div class="flex items-center justify-between w-full p-4 bg-aura-surface-50 rounded-lg cursor-pointer">
                    <span class="font-medium">{{ $faq->question }}</span>
                    <x-aura::icon name="chevron-down" class="w-4 h-4" />
                </div>
            </x-slot:trigger>
            <div class="px-4 py-3">
                <p class="text-aura-surface-600">{{ $faq->answer }}</p>
            </div>
        </x-aura::collapsible>
    @endforeach
</div>

Accessibility

  • The trigger element includes aria-expanded to indicate the current state to screen readers.
  • The collapsible content area uses aria-hidden when collapsed.
  • Focus management is handled automatically via Alpine.js transitions.