Fluxtor

#Introduction

The Accordion component is a collapsible content component designed to organize information in an expandable format. It allows users to show and hide sections of related content, making it perfect for FAQs, product details, settings panels, and other scenarios where space-efficient content organization is needed.

#Installation

Use the fluxtor artisan command to install the accordion component easily:

php artisan fluxtor:install accordion

Once installed, you can use the <x-ui.accordion />, <x-ui.accordion.item />, <x-ui.accordion.trigger />, and <x-ui.accordion.content /> components in any Blade view.

#Usage

#Basic Accordion

<x-ui.accordion>
    <x-ui.accordion.item>
        <x-ui.accordion.trigger>
            What is your return policy?
        </x-ui.accordion.trigger>
        <x-ui.accordion.content>
            <p>We offer a 30-day return policy for all unused items in their original packaging. Simply contact our customer service team to initiate a return.</p>
        </x-ui.accordion.content>
    </x-ui.accordion.item>

    <x-ui.accordion.item>
        <x-ui.accordion.trigger>
            How long does shipping take?
        </x-ui.accordion.trigger>
        <x-ui.accordion.content>
            <p>Standard shipping typically takes 3-5 business days, while express shipping takes 1-2 business days.</p>
        </x-ui.accordion.content>
    </x-ui.accordion.item>
</x-ui.accordion>

#Shorthand Syntax

For simple accordions, you can use the shorthand syntax with the trigger prop.

<x-ui.accordion>
    <x-ui.accordion.item trigger="Account Settings">
        <p>Manage your account preferences, update your profile information, and configure notification settings.</p>
        <div class="mt-3 space-y-2">
            <div class="flex items-center justify-between">
                <span>Email notifications</span>
                <span class="text-green-600">Enabled</span>
            </div>
            <div class="flex items-center justify-between">
                <span>Two-factor authentication</span>
                <span class="text-green-600">Enabled</span>
            </div>
        </div>
    </x-ui.accordion.item>

    <x-ui.accordion.item trigger="Privacy & Security">
        <p>Control your privacy settings and security preferences to keep your account safe.</p>
        <ul class="mt-3 space-y-1 list-disc list-inside">
            <li>Password requirements</li>
            <li>Login history</li>
            <li>Data sharing preferences</li>
        </ul>
    </x-ui.accordion.item>
</x-ui.accordion>

#Expanded by Default

Set an accordion item to be expanded when the component loads.

<x-ui.accordion>
    <x-ui.accordion.item 
        expanded
        trigger="Getting Started">
        <p>Welcome! This section is expanded by default to help you get started quickly.</p>
        <div class="mt-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded">
            <p class="text-sm">💡 <strong>Tip:</strong> Use the <code>expanded</code> prop to open important sections by default.</p>
        </div>
    </x-ui.accordion.item>

    <x-ui.accordion.item trigger="Advanced Features">
        <p>Explore advanced features and customization options for power users.</p>
    </x-ui.accordion.item>
</x-ui.accordion>

#Disabled Items

Disable specific accordion items to prevent user interaction.

<x-ui.accordion>
    //
    <x-ui.accordion.item 
        disabled 
        trigger="Premium Features (Coming Soon)">
        <p>This content is not yet available.</p>
    </x-ui.accordion.item>
    //
</x-ui.accordion>

#Reverse Layout

Use the reverse layout to position chevron icons on the left side.

<x-ui.accordion reverse>
    //..
</x-ui.accordion>

#Component Props Reference

#Accordion Props

#Accordion Item Props

#Inherited Props (Accordion Item)

These props are automatically inherited from the parent accordion component:

#Accordion Item Trigger Props