Accordion Component

The Accordion component is a collapsible content panel that allows users to expand and collapse sections.

Usage

The simplest way to use the accordion component:

<x-accordion>
    <x-slot:header>What is Laravel?</x-slot:header>
    <x-slot:content>
        Laravel is a PHP web application framework.
    </x-slot:content>
</x-accordion>

Laravel is a PHP web application framework.

Using Slots

You can use either named slots or the default slot for content:

<x-accordion>
    <x-slot:header>Question Title</x-slot:header>
    <x-slot:content>
        This is the answer content.
    </x-slot:content>
</x-accordion>

<x-accordion>
    <x-slot:header>Another Question</x-slot:header>
    <x-slot:content>
        This content uses the default slot.
    </x-slot:content>
</x-accordion>

This is the answer content.

This content uses the default slot.

Initially Expanded

Set the expanded prop to true to have the accordion open by default:

<x-accordion :expanded="true">
    <x-slot:header>Open by Default</x-slot:header>
    <x-slot:content>
        This accordion starts expanded.
    </x-slot:content>
</x-accordion>

This accordion starts expanded.

First answer.

Second answer.

Props Reference

Prop	Type	Default	Description
`id`	string\|null	`null`	Custom ID for the accordion. If not provided, a random ID will be generated.
`expanded`	bool	`false`	Whether the accordion should be expanded by default.

Slots

Slot	Description
`header` or `title`	The header text displayed in the accordion button. You can use either `<x-slot:header>` or `<x-slot:title>`.
`content` or default slot	The content displayed when the accordion is expanded. You can use `<x-slot:content>` or place content in the default slot.

References

Category	Path / Name	Description
Component	resources/views/components/accordion.blade.php	Accordion component file

For the detailed documentation, please visit the Penguin UI Alerts.