Accordion

Accordion Component

The Accordion component is a collapsible container system for organizing content into expandable sections. It uses Alpine.js for interactivity and supports both manual control and Livewire binding for reactive state management.

Example Usage

<x-accordion>
    <x-accordion.item>
        <x-accordion.item.trigger>
            Section 1
        </x-accordion.item.trigger>
        <x-accordion.item.content>
            Content for section 1.
        </x-accordion.item.content>
    </x-accordion.item>
    <x-accordion.item>
        <x-accordion.item.trigger>
            Section 2
        </x-accordion.item.trigger>
        <x-accordion.item.content>
            Content for section 2.
        </x-accordion.item.content>
    </x-accordion.item>
</x-accordion>

Components and Props

Renders the wrapper element for the entire accordion.

• selectedAccordionItem (string|null): Sets the currently opened accordion item's UUID manually or binds to a Livewire model via wire:model for reactive state.

<x-accordion.item>

Wraps a single accordion item (trigger + content).

• uuid (string): Unique identifier for the item. Defaults to a randomly generated UUID. Used to manage open/close state.

<x-accordion.item.trigger>

Renders the clickable button to toggle an accordion section.

• No specific props, but inherits UUID context from its parent item. Uses ARIA attributes and Tailwind classes for accessibility and style.

<x-accordion.item.content>

Renders the collapsible content area for the associated trigger.

• No specific props. Automatically shown/hidden based on the UUID match with selectedAccordionItem. Uses Alpine.js x-collapse for smooth transitions.

Overview

This Accordion component helps you create interactive, accessible collapsible content blocks with Tailwind CSS and Alpine.js. It's ideal for FAQs, toggle panels, and sectioned content displays. It supports both static UUID and Livewire-driven state management.