Accordion
Use Accordion to hide and reveal related content in expandable rows.
Content settings
| Setting | What it controls |
|---|---|
| Items | Add, remove, reorder, and edit rows. |
| Header | The visible question or title. |
| Content | The body text shown when expanded. |
| Default state | Which item starts open when available. |
| Icon | Expand/collapse icon when supported. |
Style settings
| Style area | What you can adjust |
|---|---|
| Header | Typography, color, background, padding, and hover/active state. |
| Body | Typography, color, background, padding, and spacing. |
| Container | Border, radius, shadow, gap, and responsive layout. |
| Icon | Icon size, position, color, and active state. |
Best practices
- Use clear headers.
- Put important conversion copy outside hidden panels.
- Test expansion on mobile.
Testing notes
- Open and close every accordion row after editing items.
- Check the default open state if the first answer should be visible immediately.
- Preview mobile spacing so long headers, icons, and body text remain readable.
FAQ
When should I use Accordion?
Use it for FAQs, policy details, specifications, course modules, or supporting information that visitors may want to expand only when needed.
What should I configure before publishing an accordion?
Review every item, header, body content, default state, icon, active state, typography, colors, background, borders, spacing, and responsive behavior.
Should important sales copy go inside an accordion?
Keep essential conversion copy visible outside the accordion. Use expandable rows for supporting answers or details that do not need to be read by every visitor.
What should I check if accordion rows do not open correctly?
Test each row in preview and on mobile, then review item order, default state, icon settings, and any overlapping elements around the accordion.