Accordion Settings Deep Dive

The Accordion display mode has several specific settings that control how panels behave and appear.

Key Accordion Settings

accordion_open_first — When enabled, the first accordion panel starts expanded when the page loads. When disabled, all panels start collapsed.

Recommendation: Enable this to show your most important content immediately.

When enabled, multiple accordion panels can be open simultaneously. When disabled, opening one panel closes the others (classic accordion behavior).

The background color of accordion panel headers (the clickable bars). Can be different from the content background for visual separation.

The background color of expanded panel content areas.

Choose between plus/minus (+/−) or chevron (▸/▾) toggle indicators:

Place the toggle icon on the left or right side of the header.

Controls how fast panels expand and collapse:

Use Case	Open First	Multiple	Icon
Product Specs	✅ Yes	❌ No	Chevron
FAQ	❌ No	✅ Yes	Plus/Minus
Policies	❌ No	✅ Yes	Chevron
Features	✅ Yes	❌ No	Plus/Minus

Use different background colors for headers vs. content for visual hierarchy
Section Icons work beautifully with accordion headers
The accordion is fully keyboard accessible (Tab, Enter, Space)
Accordion is one of the best modes for mobile — compact and touch-friendly