Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Accordion

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

Usage
Yes. It uses ARIA attributes and keyboard-friendly controls.
Yes. It comes with default styles that match the rest of Slate.
Yes. Open and close transitions are included.
example.blade.php 
<x-slate::accordion type="single" default-value="item-1" class="max-w-lg">
    <x-slate::accordion-item value="item-1">
        <x-slate::accordion-trigger>Is it accessible?</x-slate::accordion-trigger>
        <x-slate::accordion-content>
            Yes. It uses ARIA attributes and keyboard-friendly controls.
        </x-slate::accordion-content>
    </x-slate::accordion-item>
    <x-slate::accordion-item value="item-2">
        <x-slate::accordion-trigger>Is it styled?</x-slate::accordion-trigger>
        <x-slate::accordion-content>
            Yes. It comes with default styles that match the rest of Slate.
        </x-slate::accordion-content>
    </x-slate::accordion-item>
    <x-slate::accordion-item value="item-3">
        <x-slate::accordion-trigger>Is it animated?</x-slate::accordion-trigger>
        <x-slate::accordion-content>
            Yes. Open and close transitions are included.
        </x-slate::accordion-content>
    </x-slate::accordion-item>
</x-slate::accordion>

Multiple

Allow more than one item open at once.

Yes, with type="multiple".
For multiple, each item toggles independently.
example.blade.php 
<x-slate::accordion type="multiple" default-value="a,b" class="max-w-lg">
    <x-slate::accordion-item value="a">
        <x-slate::accordion-trigger>Can I open several items?</x-slate::accordion-trigger>
        <x-slate::accordion-content>Yes, with <code>type="multiple"</code>.</x-slate::accordion-content>
    </x-slate::accordion-item>
    <x-slate::accordion-item value="b">
        <x-slate::accordion-trigger>Does collapsible still apply?</x-slate::accordion-trigger>
        <x-slate::accordion-content>For multiple, each item toggles independently.</x-slate::accordion-content>
    </x-slate::accordion-item>
</x-slate::accordion>

Composition
code 
Accordion
├── AccordionItem
│   ├── AccordionTrigger
│   └── AccordionContent

API Reference

Accordion
Prop Type Default Description
type single | multiple single One open item, or many
default-value string — Initial open value(s); comma-separated for multiple
collapsible bool true Allow closing the open item when type="single"
Last updated .