Accordion
Sections that open and close when their header is clicked. Suitable for FAQs and for grouping long content; by default only one section stays open at a time.
Basic usage
Each section is an acun:accordion.item: title gives its header and name the section name. Choose the section that is open initially with open; without it, all sections start closed. When a section opens, the open one closes.
<acun:accordion open="shipping">
<acun:accordion.item name="shipping" title="When does my order ship?">
Orders placed before 15:00 ship the same day; the tracking number is sent by email.
</acun:accordion.item>
<acun:accordion.item name="returns" title="How do I return a product?">
Create a return request from My account > Orders; the return shipping code is valid for 14 days.
</acun:accordion.item>
<acun:accordion.item name="import" title="Can products be imported from Excel?">
Yes, you can download the template from the Imports menu, fill it in and upload it.
</acun:accordion.item>
</acun:accordion>| Prop | Values |
|---|---|
open | Section name |
name | Section name; must be unique on the page |
title | Header text |
Multiple open sections
With multiple, sections open and close independently of each other. To start with several sections open, pass an array of names to :open.
<acun:accordion multiple :open="['personal', 'address']">
<acun:accordion.item name="personal" title="Personal details">
Ayşe Yılmaz · Premium member · joined March 3, 2025
</acun:accordion.item>
<acun:accordion.item name="address" title="Address">
Caferağa Dist., Moda Ave. No. 14, Kadıköy / Istanbul
</acun:accordion.item>
<acun:accordion.item name="history" title="Order history">
Last order September 12, 2026; 9 orders this year.
</acun:accordion.item>
</acun:accordion>| Prop | Values |
|---|---|
multiple | true | false |
open | 'name' | ['name1', 'name2'] |
Rich content
Section content does not have to be text only; you can put a list, a button or a form field in it. A class given to acun:accordion.item is added to the content area.
<acun:accordion open="documents">
<acun:accordion.item name="documents" title="Documents required for a business account">
<ul class="list-disc space-y-1 ps-5">
<li>Tax registration certificate</li>
<li>List of authorized signatories</li>
<li>Trade registry gazette</li>
</ul>
<acun:button size="sm" variant="outline" class="mt-4">Upload document</acun:button>
</acun:accordion.item>
<acun:accordion.item name="duration" title="How long does approval take?">
Business account requests are decided within 2 business days at the latest.
</acun:accordion.item>
</acun:accordion>| Prop | Values |
|---|---|
class (accordion.item) | Classes of the content area |
Heading and content parts
If the header needs more than text (an icon, a badge, a count), leave out title and write the section with the acun:accordion.heading and acun:accordion.content parts. The parts find the section's name on their own; attributes such as class are added to the button on the heading and to the content area on the content.
<acun:accordion open="pending">
<acun:accordion.item name="pending">
<acun:accordion.heading>
<acun:icon name="clock" size="4" class="text-amber-500" />
Pending tickets
<acun:badge variant="warning">12</acun:badge>
</acun:accordion.heading>
<acun:accordion.content>
12 support tickets are awaiting a reply; the oldest has been waiting for 3 days.
</acun:accordion.content>
</acun:accordion.item>
<acun:accordion.item name="completed">
<acun:accordion.heading>
<acun:icon name="check-circle" size="4" class="text-emerald-500" />
Resolved tickets
<acun:badge variant="success">48</acun:badge>
</acun:accordion.heading>
<acun:accordion.content>
48 tickets were resolved in September.
</acun:accordion.content>
</acun:accordion.item>
</acun:accordion>| Prop | Values |
|---|---|
acun:accordion.heading | Header; attributes are added to the button |
acun:accordion.content | Content; attributes are added to the content area |
Indicator
The accordion sets the open/closed marker in the headers: indicator is chevron (default), plus (turns into a minus when open) or none; indicator-position="start" moves the marker to the left of the text. A heading can use its own icon with <acun:slot:indicator>; style its open state with group-aria-expanded:.
<acun:accordion indicator="plus" indicator-position="start" open="fee">
<acun:accordion.item name="fee" title="Is there a shipping fee?">
Shipping is free on orders of ₺500 or more; smaller orders are charged a ₺49.90 shipping fee.
</acun:accordion.item>
<acun:accordion.item name="hours" title="What are the support hours?">
The support team answers tickets on weekdays between 09:00 and 18:00.
</acun:accordion.item>
</acun:accordion>
<acun:accordion>
<acun:accordion.item name="custom">
<acun:accordion.heading>
Custom indicator
<acun:slot:indicator><acun:icon name="chevron-double-down" size="4" class="transition-transform group-aria-expanded:rotate-180" /></acun:slot:indicator>
</acun:accordion.heading>
<acun:accordion.content>Your own icon; it rotates when the section opens.</acun:accordion.content>
</acun:accordion.item>
</acun:accordion>| Prop | Values |
|---|---|
indicator | chevron · plus · none |
indicator-position | end · start |
indicator (slot, accordion.heading) | Custom marker |
Disabled section
A section with disabled cannot be opened; its header looks faded and cannot be clicked. Suitable for steps that are not available yet or for sections the user has no permission for.
<acun:accordion open="packed">
<acun:accordion.item name="packed" title="Orders packed">486 orders were packed and labeled.</acun:accordion.item>
<acun:accordion.item name="shipped" title="Handed to carriers">3 of 4 carriers have picked up their packages.</acun:accordion.item>
<acun:accordion.item name="report" title="End-of-day report (opens at 18:00)" disabled>The report is prepared at the end of the day.</acun:accordion.item>
</acun:accordion>Lazy content
acun:accordion.content lazy does not add the content to the page until the section is first opened; once opened, it stays in place. A chart, a map, a video or a heavy Livewire component does not slow down the page load. If you put a Livewire component with its own lazy option inside (<livewire:sales-stats lazy />), that component also loads only when the section opens.
<acun:accordion>
<acun:accordion.item name="stats">
<acun:accordion.heading>
<acun:icon name="chart-bar" size="4" /> Weekly orders chart
</acun:accordion.heading>
<acun:accordion.content lazy>
<acun:chart :height="200" :options="[
'chart' => ['type' => 'bar'],
'series' => [['name' => 'Orders', 'data' => [62, 71, 58, 80, 74, 96, 45]]],
'xaxis' => ['categories' => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']],
'dataLabels' => ['enabled' => false],
]" />
</acun:accordion.content>
</acun:accordion.item>
</acun:accordion>| Prop | Values |
|---|---|
lazy (accordion.content) | Content is rendered on first open |
Free-form trigger
If you need a row whose layout is entirely yours instead of the ready-made header, use acun:accordion.trigger: it is a button without styling or a marker, and its accessibility links (aria-expanded, aria-controls) are the same as the heading's. Put links and other buttons next to the trigger, not inside it; style its open state with group-aria-expanded:.
<acun:accordion>
@foreach ([['order-10482', 'Order #10482 · Kadıköy', 'Ahmet Yılmaz', 3], ['order-10483', 'Order #10483 · Üsküdar', 'Elif Kaya', 5]] as [$name, $order, $customer, $items])
<acun:accordion.item :name="$name">
<div class="flex items-center gap-3 px-5 py-3">
<acun:accordion.trigger class="flex min-w-0 flex-1 items-center gap-3 text-left">
<acun:icon name="chevron-right" size="4" class="flex-none text-gray-400 transition-transform group-aria-expanded:rotate-90" />
<acun:avatar :name="$customer" size="sm" />
<span class="min-w-0">
<span class="block truncate text-sm font-medium text-gray-900 dark:text-zinc-100">{{ $order }}</span>
<span class="block text-xs text-gray-500 dark:text-zinc-400">{{ $customer }} · {{ $items }} items</span>
</span>
</acun:accordion.trigger>
<acun:button size="sm" variant="white">Track shipment</acun:button>
</div>
<acun:accordion.content>
The order was handed to the carrier at 09:00 in the morning; if it cannot be delivered, delivery is retried the next business day.
</acun:accordion.content>
</acun:accordion.item>
@endforeach
</acun:accordion>| Prop | Values |
|---|---|
acun:accordion.trigger | Unstyled trigger; attributes go to the button |
Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
multiple | false | Several sections can stay open at the same time |
open | null | Name, or array of names, of the initially open section(s) |
accordion.item: name | — | Required; section name, the id is generated from it |
accordion.item: title | null | Header text; without it, the section is written with the heading and content parts |
indicator | chevron | Marker in the headers: chevron · plus · none |
indicator-position | end | Position of the marker: end · start |
accordion.item: disabled | false | The section cannot be opened; its header and trigger are disabled |
accordion.content: lazy | false | Content is rendered when the section is first opened and stays in place |
accordion.trigger | — | Unstyled trigger with a free-form layout, in place of the heading |