Skip to main content

Accordion

Collapsible accordion panels. Tabs: Content, Layout, Behaviour, Styling, Animations, Advanced.

Content

Accordion options panel — Content tab
  • Accordion Items — a repeatable list; each item has a Title, Content (rich text), and an Open by Default switch.

Layout

Accordion options panel — Layout tab
OptionChoices
Title TagH2–H6 / Span / Paragraph
Icon StylePlus / Minus (+−), Plus / X (), Chevron (), Arrow (), No Icon, Custom (image or text/emoji)
Icon PositionLeft, Right
Custom Closed/Open-State ImageUpload (used when Icon Style = Custom)
Custom Closed/Open-State TextText/emoji (used when Icon Style = Custom)
Item NumberingNone · 1, 2, 3 · 01, 02, 03 · a, b, c · A, B, C · i, ii, iii · I, II, III · Q1, Q2, Q3 · Custom…
Custom Template / Start NumberFor custom numbering
Item SpacingGap between items
Title AlignmentLeft (default), Center, Right
Screenshots — icon styles & numbering

These two options have several visible variants worth a screenshot each. Suggested files: accordion-icon-plus-minus, accordion-icon-chevron, accordion-icon-arrow, accordion-numbering-decimal, accordion-numbering-roman in static/img/shortcodes/.

Behaviour

Accordion options panel — Behaviour tab
OptionChoices
Initially OpenFirst Item, None (All Closed), All Open
CollapsibleOn/Off
Multiple OpenOn/Off
URL Hash Deep-LinkingOn/Off
Show Expand / Collapse All ButtonsOn/Off

Styling

Accordion options panel — Styling tab

Per-state Title, Content and Icon colors (closed/open), Background Color, and Margin & Padding.