Accordion
Collapsible content sections with smooth animations
Basic Usage
The most basic accordion with multiple items:
<neura::accordion>
<neura::accordion.item>
<neura::accordion.trigger>
Question title
</neura::accordion.trigger>
<neura::accordion.content>
Answer content here
</neura::accordion.content>
</neura::accordion.item>
</neura::accordion>Simplified Syntax
Use the trigger attribute for shorter syntax:
<neura::accordion.item trigger="Question title">
Answer content here
</neura::accordion.item>Expanded by Default
Open an item by default with the expanded attribute:
<neura::accordion.item trigger="Title" expanded>
Content visible by default
</neura::accordion.item>Disabled Items
Disable items with the disabled attribute:
<neura::accordion.item trigger="Title" disabled>
Content not accessible
</neura::accordion.item>Styled Accordions
Customize the appearance with Tailwind classes:
<neura::accordion class="border rounded-lg">
<neura::accordion.item class="hover:bg-neutral-50">
<neura::accordion.trigger class="bg-neutral-100">
Title
</neura::accordion.trigger>
<neura::accordion.content>
Content
</neura::accordion.content>
</neura::accordion.item>
</neura::accordion>FAQ Example
Perfect for FAQ sections:
<neura::accordion>
<neura::accordion.item trigger="Question?" expanded>
Answer here
</neura::accordion.item>
<neura::accordion.item trigger="Another question?">
Another answer
</neura::accordion.item>
</neura::accordion>With Rich Content
Content can include any component:
<neura::accordion.item trigger="Title">
<div class="flex gap-2">
<neura::button>Action</neura::button>
</div>
</neura::accordion.item>Colored Accordions
Add colors to differentiate sections:
<neura::accordion class="border border-blue-200 rounded-lg">
<neura::accordion.item trigger="Info">
<neura::box class="bg-blue-50">
Content
</neura::box>
</neura::accordion.item>
</neura::accordion>Documentation Sections
Organize documentation into sections:
Best Practices
Use for optional content
Accordions are perfect for content that users can choose to view
Limit the number of items
Maximum 5-7 items for better user experience
Use clear titles
Triggers should be descriptive so users know what they'll find
Avoid critical content
Don't hide essential information in accordions
Expand important sections
Use expanded to open the most relevant sections by default
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| trigger | string | null | Trigger button text (shorthand syntax) |
| expanded | boolean | false | Open by default |
| disabled | boolean | false | Disable item interaction |
| reverse | boolean | false | Reverse trigger layout |