This is the content of Item A. Only one panel can be open at a time in this default (exclusive/single-open) accordion.
Opening Item B will automatically close Item A. The is-active class controls which panel is open on page load.
Content for Item C. The accordion JS plugin handles the exclusive toggle behaviour automatically.
Content for Item D. Use aria-expanded="true" together with is-active for the default open item.
This accordion allows multiple panels open at the same time (ui-accordion="multi: true").
Click any header independently. Each panel toggles without affecting its siblings.
Useful for FAQs, settings groups, or any content where the user may need to reference multiple sections simultaneously.
Arrow indicator hidden via ui-accordion="arrow: false". All toggle behaviour is unchanged.
Useful when the trigger label or icon already communicates the expand/collapse state.
Combine with multi: true; arrow: false to suppress the arrow on multi-open accordions too.
Each panel opens independently. No chevron indicator is shown, so a different affordance communicates expand/collapse.
Attribute: ui-accordion="multi: true; arrow: false". Both flags compose without conflict.
All three panels can be expanded simultaneously with no arrow decoration.
| Attribute / option | Description |
|---|---|
ui-accordion | marks the container element |
[ui-toggle] | the clickable panel header |
[ui-collapse] | the collapsible panel body |
| Attribute / option | Description |
|---|
| Attribute / option | Description |
|---|---|
ui-accordion="exclusive:true" | only one panel open at a time |
ui-accordion="arrow:false" | hides the expand/collapse arrow |