Accordion Block
The Accordion block creates collapsible content panels perfect for FAQs, content organization, and space-saving layouts.
What is the Accordion Block?
The Accordion is a two-block system:
- Accordion Container – parent wrapper
- Accordion Items – individual collapsible panels
Key Features
- Multiple icon styles (chevron, plus, arrow, caret, triangle)
- Single or multiple items open at once
- Customizable colors for headers and content
- Smooth animations
- Keyboard navigation support
- Screen reader friendly
How to Use
- Insert Accordion block
- Add Accordion Item blocks inside
- Set title for each item
- Add content inside each item
- Configure icon style and colors in sidebar
Settings
Accordion Container Settings:
- Allow Multiple Open – Enable to keep multiple panels open
- Icon Style – Choose from 5 icon styles
- Colors – Set header and content colors
Accordion Item Settings:
- Default Open – Start with panel expanded
- Title – Panel header text
- Colors – Override parent colors per item
Common Use Cases
FAQ Section
- Insert Accordion
- Add one Accordion Item per question
- Use question as title, answer as content
- Set icon to plus/minus for clarity
Product Specifications
- Insert Accordion
- Create items for Features, Specs, Reviews
- Add detailed content in each panel
- Keep first panel open by default
Best Practices
- Use clear, concise titles
- Keep content scannable with headings and lists
- Limit to 5-10 items for best UX
- Test keyboard navigation (Tab, Enter, Space)
- Consider opening first item by default
Accessibility
- Uses proper ARIA attributes
- Full keyboard navigation support
- Screen reader announcements
- Focus indicators visible