Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
Default
Single mode — one item open at a time.
Yes. It adheres to the WAI-ARIA design pattern.
Yes. It comes with default styles that match the Suite.jl design system.
Yes. It uses CSS transitions for smooth expand/collapse.
Multiple
Multiple items can be open simultaneously.
Content for the first section.
Content for the second section.
Collapsible
Single mode with collapsible — all items can be closed.
Click the trigger again to collapse.
Both items can be closed simultaneously.
Usage
julia
using Suite
Accordion(default_value="item-1",
AccordionItem(value="item-1",
AccordionTrigger("Section 1"),
AccordionContent(P("Content 1")),
),
AccordionItem(value="item-2",
AccordionTrigger("Section 2"),
AccordionContent(P("Content 2")),
),
)Keyboard Interactions
| Key | Action |
|---|---|
| Enter / Space | Toggle the focused accordion item |
| Arrow Down | Move focus to the next trigger |
| Arrow Up | Move focus to the previous trigger |
| Home | Move focus to the first trigger |
| End | Move focus to the last trigger |
API Reference
Accordion
| Prop | Type | Default | Description |
|---|---|---|---|
| type | String | "single" | "single" or "multiple" — selection mode |
| collapsible | Bool | false | Allow all items to be closed (single mode) |
| default_value | String/Vector | nothing | Initially open item(s) |
| orientation | String | "vertical" | "vertical" or "horizontal" |
| disabled | Bool | false | Disable all items |
| class | String | "" | Additional CSS classes |
AccordionItem
| Prop | Type | Default | Description |
|---|---|---|---|
| value | String | "" | Unique identifier for this item (required) |
| disabled | Bool | false | Disable this specific item |
| class | String | "" | Additional CSS classes |
AccordionTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Trigger content (text) |
| class | String | "" | Additional CSS classes |
AccordionContent
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Panel content |
| class | String | "" | Additional CSS classes |