Accordion

A collapsible content panel for organizing information into expandable sections. Supports exclusive mode, smooth transitions, and default expanded items.

Basic usage

What is Boson UI?

Boson UI is a component library for Laravel Blade that provides beautiful, accessible UI components out of the box.

How do I install it?

Install via Composer with composer require davidgut/boson and publish the assets.

Is it free?

Yes, Boson UI is open-source and free to use in any project.

<x-boson::accordion>
    <x-boson::accordion.item>
        <x-boson::accordion.heading>What is Boson UI?</x-boson::accordion.heading>
        <x-boson::accordion.content>Boson UI is a component library for Laravel Blade.</x-boson::accordion.content>
    </x-boson::accordion.item>
    <x-boson::accordion.item>
        <x-boson::accordion.heading>How do I install it?</x-boson::accordion.heading>
        <x-boson::accordion.content>Install via Composer.</x-boson::accordion.content>
    </x-boson::accordion.item>
</x-boson::accordion>

Exclusive mode

Section one

Only one section can be open at a time. Try clicking another heading.

Section two

This will close section one when opened.

Section three

And this will close any other open section.

<x-boson::accordion exclusive>
    <x-boson::accordion.item>
        <x-boson::accordion.heading>Section one</x-boson::accordion.heading>
        <x-boson::accordion.content>Content for section one.</x-boson::accordion.content>
    </x-boson::accordion.item>
    <x-boson::accordion.item>
        <x-boson::accordion.heading>Section two</x-boson::accordion.heading>
        <x-boson::accordion.content>Content for section two.</x-boson::accordion.content>
    </x-boson::accordion.item>
</x-boson::accordion>

With transitions

Animated section one

This section expands and collapses with a smooth transition effect.

Animated section two

The transition creates a polished, professional feel.

<x-boson::accordion transition>
    <x-boson::accordion.item>
        <x-boson::accordion.heading>Animated section</x-boson::accordion.heading>
        <x-boson::accordion.content>Smooth expand and collapse.</x-boson::accordion.content>
    </x-boson::accordion.item>
</x-boson::accordion>

Default expanded

Expanded by default

This item is open when the page loads.

Collapsed by default

This item starts closed.

<x-boson::accordion>
    <x-boson::accordion.item expanded>
        <x-boson::accordion.heading>Expanded by default</x-boson::accordion.heading>
        <x-boson::accordion.content>This item is open when the page loads.</x-boson::accordion.content>
    </x-boson::accordion.item>
    <x-boson::accordion.item>
        <x-boson::accordion.heading>Collapsed by default</x-boson::accordion.heading>
        <x-boson::accordion.content>This item starts closed.</x-boson::accordion.content>
    </x-boson::accordion.item>
</x-boson::accordion>

Exclusive with transition

Account settings

Manage your account details, email address, and password.

Notifications

Choose which notifications you want to receive and how.

Privacy

Control who can see your profile and activity.

<x-boson::accordion exclusive transition>
    <x-boson::accordion.item expanded>
        <x-boson::accordion.heading>Account settings</x-boson::accordion.heading>
        <x-boson::accordion.content>Manage your account details.</x-boson::accordion.content>
    </x-boson::accordion.item>
    <x-boson::accordion.item>
        <x-boson::accordion.heading>Notifications</x-boson::accordion.heading>
        <x-boson::accordion.content>Choose your notifications.</x-boson::accordion.content>
    </x-boson::accordion.item>
</x-boson::accordion>

Props

accordion

Prop	Type	Default	Description
`exclusive`	`bool`	`false`	Only allow one item to be open at a time
`transition`	`bool`	`false`	Enable smooth expand/collapse animations

accordion.item

Prop	Type	Default	Description
`expanded`	`bool`	`false`	Set the item to be expanded by default