Accordion - Laravel Blade

Use the accordion component to show and hide content based on a collapsible element, useful for FAQ sections, navigation menus, and more.

Default Accordion

Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.

Blade code

<x-fwb.accordion id="default-accordion">
    <x-fwb.accordion.item id="item-1" title="What is Flowbite?" :open="true">
        Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
    </x-fwb.accordion.item>
    <x-fwb.accordion.item id="item-2" title="Is there a Figma file available?">
        Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
    </x-fwb.accordion.item>
    <x-fwb.accordion.item id="item-3" title="What are the differences between Flowbite and Tailwind UI?">
        The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product.
    </x-fwb.accordion.item>
</x-fwb.accordion>

Custom Content

Use the content named slot when you need full control over the HTML inside the accordion body.

Check out this guide to learn how to get started and start developing websites even faster with components on top of Tailwind CSS.

Blade code

<x-fwb.accordion id="custom-content-accordion">
    <x-fwb.accordion.item id="cc-1" title="Using the content slot for custom HTML" :open="true">
        <x-slot:content>
            <p class="mb-2 text-gray-500 dark:text-gray-400">Use the <code>content</code> named slot when you need full control over the HTML inside the accordion body.</p>
            <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="#" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
        </x-slot:content>
    </x-fwb.accordion.item>
    <x-fwb.accordion.item id="cc-2" title="Simple text gets auto-styled">
        When you pass plain text without using the content slot, it is automatically wrapped in a styled paragraph.
    </x-fwb.accordion.item>
</x-fwb.accordion>

Title as Prop vs Slot

You can also pass the title as a named slot instead of a prop. This is useful if you need HTML inside the title.

Blade code

<x-fwb.accordion id="title-slot-accordion">
    <x-fwb.accordion.item id="ts-1" :open="true">
        <x-slot:title>Title as a named slot</x-slot:title>
        You can also pass the title as a named slot instead of a prop. This is useful if you need HTML inside the title.
    </x-fwb.accordion.item>
    <x-fwb.accordion.item id="ts-2" title="Title as a prop">
        Both approaches work — use whichever fits your needs.
    </x-fwb.accordion.item>
</x-fwb.accordion>

Always Open

Flowbite is an open-source library of interactive components built on top of Tailwind CSS.

Flowbite is first conceptualized and designed using the Figma software.

Blade code

<x-fwb.accordion id="always-open-accordion" :alwaysOpen="true">
    <x-fwb.accordion.item id="ao-1" title="What is Flowbite?" :open="true">
        Flowbite is an open-source library of interactive components built on top of Tailwind CSS.
    </x-fwb.accordion.item>
    <x-fwb.accordion.item id="ao-2" title="Is there a Figma file available?" :open="true">
        Flowbite is first conceptualized and designed using the Figma software.
    </x-fwb.accordion.item>
    <x-fwb.accordion.item id="ao-3" title="What are the differences between Flowbite and Tailwind UI?">
        The main difference is that the core components from Flowbite are open source under the MIT license.
    </x-fwb.accordion.item>
</x-fwb.accordion>

Separated Cards

Flowbite is an open-source library of interactive components built on top of Tailwind CSS.

Blade code

<x-fwb.accordion id="separated-accordion" :separated="true">
    <x-fwb.accordion.item id="sep-1" title="What is Flowbite?" :open="true">
        Flowbite is an open-source library of interactive components built on top of Tailwind CSS.
    </x-fwb.accordion.item>
    <x-fwb.accordion.item id="sep-2" title="Is there a Figma file available?">
        Flowbite is first conceptualized and designed using the Figma software.
    </x-fwb.accordion.item>
    <x-fwb.accordion.item id="sep-3" title="What are the differences between Flowbite and Tailwind UI?">
        The main difference is that the core components from Flowbite are open source under the MIT license.
    </x-fwb.accordion.item>
</x-fwb.accordion>

Flush Accordion

Flowbite is an open-source library of interactive components built on top of Tailwind CSS.

Blade code

<x-fwb.accordion id="flush-accordion" :flush="true">
    <x-fwb.accordion.item id="flush-1" title="What is Flowbite?" :open="true">
        Flowbite is an open-source library of interactive components built on top of Tailwind CSS.
    </x-fwb.accordion.item>
    <x-fwb.accordion.item id="flush-2" title="Is there a Figma file available?">
        Flowbite is first conceptualized and designed using the Figma software.
    </x-fwb.accordion.item>
</x-fwb.accordion>

Color Options

Flowbite is an open-source library of interactive components built on top of Tailwind CSS.

Blade code

<x-fwb.accordion id="color-accordion" activeClasses="bg-blue-100 dark:bg-gray-800 text-blue-600 dark:text-white" inactiveClasses="text-gray-500 dark:text-gray-400">
    <x-fwb.accordion.item id="color-1" title="What is Flowbite?" :open="true">
        Flowbite is an open-source library of interactive components built on top of Tailwind CSS.
    </x-fwb.accordion.item>
    <x-fwb.accordion.item id="color-2" title="Is there a Figma file available?">
        Flowbite is first conceptualized and designed using the Figma software.
    </x-fwb.accordion.item>
</x-fwb.accordion>

Arrow Style

This accordion item has no arrow indicator.

Blade code

<x-fwb.accordion id="arrow-accordion">
    <x-fwb.accordion.item id="arrow-1" title="No arrow icon" arrowStyle="none" :open="true">
        This accordion item has no arrow indicator.
    </x-fwb.accordion.item>
    <x-fwb.accordion.item id="arrow-2" title="Static arrow (no rotation)" arrowStyle="static">
        This accordion item has an arrow that does not rotate on open/close.
    </x-fwb.accordion.item>
    <x-fwb.accordion.item id="arrow-3" title="Rotating arrow (default)" arrowStyle="default">
        This accordion item has the default rotating arrow indicator.
    </x-fwb.accordion.item>
</x-fwb.accordion>

Component Properties

Accordion x-fwb.accordion

Prop Type Default Description
id string auto Unique identifier for the accordion container. Auto-generated if not provided.
flush bool false Remove background, borders, and shadow for a flat appearance.
alwaysOpen bool false Allow multiple accordion items to be open simultaneously.
separated bool false Display items as individual cards with spacing between them.
activeClasses string|null null Custom Tailwind CSS classes applied to the active (open) accordion item button.
inactiveClasses string|null null Custom Tailwind CSS classes applied to inactive (closed) accordion item buttons.

Accordion Item x-fwb.accordion.item

Prop Type Default Description
id string auto Unique identifier for the accordion item. Auto-generated if not provided.
title string|slot null Heading text. Can be passed as a prop (title="...") or as a named slot (<x-slot:title>).
open bool false Set the item to be initially expanded.
arrowStyle string default Arrow icon style: default (rotating), static (no rotation), or none (hidden).

Accordion Item Slots

Slot Description
default Body content. Plain text is auto-wrapped in <p class="mb-2 text-gray-500 dark:text-gray-400">. HTML content is rendered as-is.
content Named slot for full control over body HTML. When used, the default slot is ignored and no auto-wrapping occurs.
title Named slot alternative to the title prop. Useful if you need HTML inside the heading.