README

Expandable content sections with smooth animations for Laravel applications. Supports single or multiple open panels, default open state, and custom styling. Works with Livewire and Vue 3.

Installation

composer require mrshanebarron/accordion

Livewire Usage

Basic Usage

@php
$items = [
    'item1' => [
        'title' => 'What is this package?',
        'content' => 'A beautiful accordion component for Laravel applications.',
    ],
    'item2' => [
        'title' => 'Is it free to use?',
        'content' => 'Yes! All components are free and open source under the MIT license.',
    ],
    'item3' => [
        'title' => 'Does it support Livewire?',
        'content' => 'Absolutely! Works with Livewire and Vue.js.',
    ],
];
@endphp

<livewire:sb-accordion :items="$items" />

Default Open

<livewire:sb-accordion :items="$items" default-open="item1" />

Multiple Open Panels

<livewire:sb-accordion :items="$items" :multiple="true" />

Livewire Props

Item Structure

$items = [
    'unique_key' => [
        'title' => 'Panel Title',
        'content' => 'Panel content text or HTML',
    ],
];

Vue 3 Usage

Setup

import { SbAccordion, SbAccordionItem } from './vendor/sb-accordion';
app.component('SbAccordion', SbAccordion);
app.component('SbAccordionItem', SbAccordionItem);

Basic Usage

<template>
  <SbAccordion>
    <SbAccordionItem title="First Panel">
      Content for the first panel.
    </SbAccordionItem>
    <SbAccordionItem title="Second Panel">
      Content for the second panel.
    </SbAccordionItem>
  </SbAccordion>
</template>

With Default Open

<template>
  <SbAccordion default-open="panel1">
    <SbAccordionItem id="panel1" title="Open by Default">
      This panel is open by default.
    </SbAccordionItem>
    <SbAccordionItem id="panel2" title="Closed">
      This panel starts closed.
    </SbAccordionItem>
  </SbAccordion>
</template>

Multiple Open

<template>
  <SbAccordion :multiple="true">
    <SbAccordionItem title="Panel One">Content One</SbAccordionItem>
    <SbAccordionItem title="Panel Two">Content Two</SbAccordionItem>
  </SbAccordion>
</template>

Vue Props

SbAccordion

SbAccordionItem

Events

Livewire

<livewire:sb-accordion
    :items="$items"
    @accordion-toggled="handleToggle"
/>

Vue

<SbAccordion @panel-toggled="handleToggle">

Styling

The accordion uses Tailwind CSS classes with:

• Smooth expand/collapse animations via Alpine.js x-collapse
• Rounded corners and subtle shadows
• Hover states on headers
• Chevron icon rotation on open

Requirements

• PHP 8.1+
• Laravel 10, 11, or 12
• Tailwind CSS 3.x
• Alpine.js (for animations)

License

MIT License