Wirestrap is still in active development

This project is pre-1.0 and may introduce breaking changes at any time without prior notice.

Accordion

Collapsible content panels with animated height transitions. Each panel is a named slot, the slot name becomes the item key and must be unique within the accordion.

Basic usage

Set the button text with the label attribute on each slot. If omitted, the slot name is used as the label.

<x-wirestrap::accordion id="faq">
    <x-slot:shipping label="Shipping"> ... </x-slot:shipping>
    <x-slot:returns label="Returns"> ... </x-slot:returns>
</x-wirestrap::accordion>

Icons

Add an icon to a panel button with icon. By default it appears before the label; set icon-placement="end" to place it after.

Icon prop

The icon prop accepts any class string from your preferred icon library, or an array of attributes for full control. Custom icon components are also supported, see icon configuration.

<x-wirestrap::accordion id="faq">
    <x-slot:shipping label="Shipping" icon="bi-truck">
        ...
    </x-slot:shipping>
    <x-slot:returns label="Returns" icon="bi-arrow-return-left" icon-placement="end">
        ...
    </x-slot:returns>
</x-wirestrap::accordion>

Open by default

Pass open on a slot to render it expanded on initial load. Without single, any number of panels can be open at once.

We ship to over 50 countries. Standard delivery takes 3-5 business days.

Items can be returned within 30 days of delivery.

<x-wirestrap::accordion id="faq">
    <x-slot:shipping label="Shipping" open> ... </x-slot:shipping>
    <x-slot:returns label="Returns" open> ... </x-slot:returns>
    <x-slot:contact label="Contact"> ... </x-slot:contact>
</x-wirestrap::accordion>

Single-open mode

Pass single to make opening one panel close the others. In single-open mode, only the first open item takes effect.

Install via Composer. Import the JS bundle and publish the compiled stylesheet.

<x-wirestrap::accordion id="faq" single>
    <x-slot:shipping label="Shipping" open> ... </x-slot:shipping>
    <x-slot:returns label="Returns"> ... </x-slot:returns>
</x-wirestrap::accordion>

Rich labels

When the trigger button needs more than plain text, add a label_{key} slot alongside the item slot. It takes precedence over the label attribute.

<x-wirestrap::accordion id="faq">
    <x-slot:label_shipping>
        <span>Shipping</span>
        <span class="badge">Free</span>
    </x-slot:label_shipping>

    <x-slot:shipping> ... </x-slot:shipping>

    <x-slot:label_returns>
        <span>Returns</span>
        <span class="badge">30 days</span>
    </x-slot:label_returns>

    <x-slot:returns> ... </x-slot:returns>
</x-wirestrap::accordion>

External control

Enable events to expose the $wirestrap.accordion Alpine magic helper. With it you can open, close, or toggle any panel from anywhere on the page using the item key. The helper dispatches a custom event on the accordion root element, so it works across Livewire components.

<x-wirestrap::accordion id="main" events>
    <x-slot:details label="Details"> ... </x-slot:details>
</x-wirestrap::accordion>

<button x-on:click="$wirestrap.accordion.toggle('main', 'details')">Toggle details</button>

Invalid feedback

Pass invalid-feedback to scan panels after each Livewire morph. Any panel containing an input with the validation error class gets its button highlighted. The class it looks for defaults to ws-form-invalid, configurable via wirestrap.validation.invalid.

First name

Last name

<x-wirestrap::accordion id="profile-form" invalid-feedback>
    <x-slot:identity label="Identity" open>
        <x-wirestrap::input label="First name" wire:model="firstName" />
    </x-slot:identity>

    <x-slot:security label="Security">
        <x-wirestrap::input label="Password" password wire:model="password" />
    </x-slot:security>
</x-wirestrap::accordion>

Props

Global configuration

Most prop defaults can be overridden globally via config/wirestrap.php.

x-wirestrap::accordion

Prop	Type	Default	Description
`id`	`string\|null`	`null`	Element id. Required when strict mode is enabled.
`single`	`bool`	`config`	When true, opening an item closes all others.
`events`	`bool`	`config`	Enables external control via the $wirestrap.accordion Alpine magic helper.
`invalid-feedback`	`bool`	`config`	Highlights item buttons containing validation errors after each Livewire morph.
No results found

Slot attributes

To use rich content as the trigger, add a label_{key} slot alongside the item slot. It takes precedence over the label attribute.

Prop	Type	Default	Description
`label`	`string`	`slot key`	Button label text. Falls back to the slot name if omitted.
`icon`	`string\|array`	`null`	Icon passed to x-wirestrap::ui.icon.
`icon-placement`	`string`	`'start'`	Icon position relative to label: start or end.
`open`	`bool`	`false`	Renders the item expanded on initial load.
No results found

$wirestrap.accordion

Method	Type	Default	Description
`$wirestrap.accordion.show(id, key)`	`--`	`--`	Open the item identified by key.
`$wirestrap.accordion.hide(id, key)`	`--`	`--`	Close the item identified by key.
`$wirestrap.accordion.toggle(id, key)`	`--`	`--`	Toggle the item identified by key.
No results found

⭐ GitHub