Skip to main content

Accordion

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

Content

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

Layout

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

:::note 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

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

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

Screenshots

note

Drop screenshots into static/img/shortcodes/ and embed them here.