FAQ Accordion Pattern
An accessible FAQ section with smooth expand/collapse animations using native <details> elements.
Configurable Settings
Edit via Cmd+K (Attributes Bar) on the FAQ Accordion section element.
| Attribute |
Default |
Options |
Description |
data-single-expand |
false |
true, false |
When true, only one panel can be open at a time |
Features
- Smooth CSS grid-based expand/collapse animations
- Icon rotation on open/close
- Accessible
<details>/<summary> markup
- Optional single-expand mode (accordion behavior)
Structure
- Header: Headline + subtext
- List: Contains accordion items
- Item:
<details> element with question/answer
- CTA Section: Avatar stack + contact prompt
Changelog
- January 27, 2025: Added data-single-expand attribute to enable single-panel-at-a-time behavior. Refactored script with helper functions for cleaner open/close logic.