1. Blade Components
  5. Accordion
Github

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

@alpinejs/collapse

Blade Components is a hand-crafted, UI component library for building consistent web experiences in Laravel apps.

Blade Components is fully open-source and free to use — check out the source code on GitHub.

You can install Blade Components using Composer. Check out the docs to get started.

Usage

<x-accordion exclusive>
    <x-accordion.item expanded>
        <x-accordion.title size="sm">What is Blade Components?</x-accordion.title>
        <x-accordion.content>
            <x-paragraph size="sm" style="muted">
                Blade Components is a hand-crafted, UI component library for building consistent web experiences in Laravel apps.
            </x-paragraph>
        </x-accordion.content>
    </x-accordion.item>

    <x-accordion.item>
        <x-accordion.title size="sm">How much does it cost?</x-accordion.title>
        <x-accordion.content>
            <x-paragraph size="sm" style="muted">
                Blade Components is fully open-source and free to use — check out the <a href="https://github.com/distortedfusion/blade-components" target="_blank">source code</a> on GitHub.
            </x-paragraph>
        </x-accordion.content>
    </x-accordion.item>

    <x-accordion.item>
        <x-accordion.title size="sm">Getting started</x-accordion.title>
        <x-accordion.content>
            <x-paragraph size="sm" style="muted">
                You can install Blade Components using Composer. Check out the <a href="/docs/installation">docs</a> to get started.
            </x-paragraph>
        </x-accordion.content>
    </x-accordion.item>
</x-accordion>

Prerequisites

The accordion component requires the @alpinejs/collapse plugin to handle its collapsed state. Without it, the accordion panels will not open or close correctly.

Exclusive

Enforce that only a single item is expanded at a time by adding the exclusive attribute to x-accordion.

Blade Components is a hand-crafted, UI component library for building consistent web experiences in Laravel apps.

Blade Components is fully open-source and free to use — check out the source code on GitHub.

You can install Blade Components using Composer. Check out the docs to get started. 

<x-accordion exclusive>
    <x-accordion.item>
        <x-accordion.title size="sm">What is Blade Components?</x-accordion.title>
        <x-accordion.content>
            <x-paragraph size="sm" style="muted">
                Blade Components is a hand-crafted, UI component library for building consistent web experiences in Laravel apps.
            </x-paragraph>
        </x-accordion.content>
    </x-accordion.item>

    <x-accordion.item>
        <x-accordion.title size="sm">How much does it cost?</x-accordion.title>
        <x-accordion.content>
            <x-paragraph size="sm" style="muted">
                Blade Components is fully open-source and free to use — check out the <a href="https://github.com/distortedfusion/blade-components" target="_blank">source code</a> on GitHub.
            </x-paragraph>
        </x-accordion.content>
    </x-accordion.item>

    <x-accordion.item>
        <x-accordion.title size="sm">Getting started</x-accordion.title>
        <x-accordion.content>
            <x-paragraph size="sm" style="muted">
                You can install Blade Components using Composer. Check out the <a href="/docs/installation">docs</a> to get started.
            </x-paragraph>
        </x-accordion.content>
    </x-accordion.item>
</x-accordion>

Transition

Enable or disable transitions during item expansion by setting transition to false on x-accordion.

Blade Components is a hand-crafted, UI component library for building consistent web experiences in Laravel apps.

Blade Components is fully open-source and free to use — check out the source code on GitHub.

You can install Blade Components using Composer. Check out the docs to get started. 

<x-accordion :transition="false">
    <x-accordion.item>
        <x-accordion.title size="sm">What is Blade Components?</x-accordion.title>
        <x-accordion.content>
            <x-paragraph size="sm" style="muted">
                Blade Components is a hand-crafted, UI component library for building consistent web experiences in Laravel apps.
            </x-paragraph>
        </x-accordion.content>
    </x-accordion.item>
    <x-accordion.item>
        <x-accordion.title size="sm">How much does it cost?</x-accordion.title>
        <x-accordion.content>
            <x-paragraph size="sm" style="muted">
                Blade Components is fully open-source and free to use — check out the <a href="https://github.com/distortedfusion/blade-components" target="_blank">source code</a> on GitHub.
            </x-paragraph>
        </x-accordion.content>
    </x-accordion.item>
    <x-accordion.item>
        <x-accordion.title size="sm">Getting started</x-accordion.title>
        <x-accordion.content>
            <x-paragraph size="sm" style="muted">
                You can install Blade Components using Composer. Check out the <a href="/docs/installation">docs</a> to get started.
            </x-paragraph>
        </x-accordion.content>
    </x-accordion.item>
</x-accordion>

Expanded

Control the default state of an accordion item by adding the expanded attribute to x-accordion.item.

Blade Components is a hand-crafted, UI component library for building consistent web experiences in Laravel apps.

Blade Components is fully open-source and free to use — check out the source code on GitHub.

You can install Blade Components using Composer. Check out the docs to get started. 

<x-accordion>
    <x-accordion.item expanded>
        <x-accordion.title size="sm">What is Blade Components?</x-accordion.title>
        <x-accordion.content>
            <x-paragraph size="sm" style="muted">
                Blade Components is a hand-crafted, UI component library for building consistent web experiences in Laravel apps.
            </x-paragraph>
        </x-accordion.content>
    </x-accordion.item>

    <x-accordion.item expanded>
        <x-accordion.title size="sm">How much does it cost?</x-accordion.title>
        <x-accordion.content>
            <x-paragraph size="sm" style="muted">
                Blade Components is fully open-source and free to use — check out the <a href="https://github.com/distortedfusion/blade-components" target="_blank">source code</a> on GitHub.
            </x-paragraph>
        </x-accordion.content>
    </x-accordion.item>

    <x-accordion.item expanded>
        <x-accordion.title size="sm">Getting started</x-accordion.title>
        <x-accordion.content>
            <x-paragraph size="sm" style="muted">
                You can install Blade Components using Composer. Check out the <a href="/docs/installation">docs</a> to get started.
            </x-paragraph>
        </x-accordion.content>
    </x-accordion.item>
</x-accordion>

Indicator Icon

Change the indicator icon by setting the indicatorIcon attribute on x-accordion.title.

Blade Components is a hand-crafted, UI component library for building consistent web experiences in Laravel apps.

Blade Components is fully open-source and free to use — check out the source code on GitHub.

You can install Blade Components using Composer. Check out the docs to get started. 

<x-accordion>
    <x-accordion.item>
        <x-accordion.title size="sm" indicator-icon="heroicon-o-arrow-up-circle">What is Blade Components?</x-accordion.title>
        <x-accordion.content>
            <x-paragraph size="sm" style="muted">
                Blade Components is a hand-crafted, UI component library for building consistent web experiences in Laravel apps.
            </x-paragraph>
        </x-accordion.content>
    </x-accordion.item>

    <x-accordion.item>
        <x-accordion.title size="sm" indicator-icon="heroicon-o-arrow-up-circle">How much does it cost?</x-accordion.title>
        <x-accordion.content>
            <x-paragraph size="sm" style="muted">
                Blade Components is fully open-source and free to use — check out the <a href="https://github.com/distortedfusion/blade-components" target="_blank">source code</a> on GitHub.
            </x-paragraph>
        </x-accordion.content>
    </x-accordion.item>

    <x-accordion.item>
        <x-accordion.title size="sm" indicator-icon="heroicon-o-arrow-up-circle">Getting started</x-accordion.title>
        <x-accordion.content>
            <x-paragraph size="sm" style="muted">
                You can install Blade Components using Composer. Check out the <a href="/docs/installation">docs</a> to get started.
            </x-paragraph>
        </x-accordion.content>
    </x-accordion.item>
</x-accordion>

Default Icons

The accordion component uses the blade-ui-kit/blade-heroicons icon set by default.

You can customize the default icons globally through the BladeComponents service or via the component directly from a service provider's boot() method, or middleware.

<?php

use DistortedFusion\BladeComponents\BladeComponents;
use DistortedFusion\BladeComponents\Components\Accordion\Toggle;

BladeComponents::defaultAccordionIndicatorIcon();
BladeComponents::setDefaultAccordionIndicatorIcon(icon: 'heroicon-o-chevron-down');

Toggle::defaultIndicatorIcon();
Toggle::setDefaultIndicatorIcon(icon: 'heroicon-o-chevron-down');

Component API

x-accordion

Attribute Default Description
exclusive false bool
Enforce that only a single item is expanded at a time.
transition true bool
Enable or disable transitions during item expansion.

x-accordion.title

Attribute Default Description
size default string
Possible values default, xs, sm or lg.
indicatorIcon null string || null
The component name for an alternative indicator icon.

x-accordion.item

Attribute Default Description
expanded false bool
Control the default state of an accordion item.
↓ ↑

Select

↵

Open

esc

Close