Skip to main content

Accordion

Collapsible panels — an FAQ, a spec sheet, a set of long answers. Core has a Details block; this is the version with icons, numbering, deep links, expand-all and FAQ structured data.

The block renders through the accordion element — the same PHP that runs in the page builder, so the front end is identical either way.

What the sidebar exposes

OptionWhat it does
tabsThe panels — each a title and its content
title_tagWhich heading level panel titles use
icon_styleThe open/closed indicator
icon_positionWhich side the indicator sits on
icon_closed_textText indicator when closed
icon_open_textText indicator when open
numberingNumber the panels, and how
numbering_startThe number to start from
item_spacingSpace between panels
title_alignmentTitle alignment
initially_openWhich panel is open on arrival
collapsibleAllow closing the last open panel
multiple_openLet several panels be open at once
hash_linkingLet a URL open a specific panel
show_expand_collapse_allAdd Expand all / Collapse all controls
faq_schemaEmit FAQ structured data
accordion_styleDesign preset
corner_radiusCorner rounding
elevationShadow depth
active_accentAccent for the open panel
title_hoverHighlight titles on hover
tab_title_colorTitle colour
title_bg_colorTitle background
tab_content_colorPanel text colour
content_bg_colorPanel background
icon_closed_colorIndicator colour when closed
icon_open_colorIndicator colour when open
font_size_presetText size preset

Anything not listed stays available in the page builder, and round-trips untouched — the block only writes the values you change, so an element styled in the builder keeps every setting this sidebar does not show.

note
tabs is a repeater

It is an addable-popup: items expand in place in the block sidebar rather than opening a modal, and store exactly the value the page builder stores.

note
numbering is a picker that reveals its own options

It is a multi-picker: choosing an option reveals the fields that belong to that choice, and only the chosen branch's values are saved. Switching choices and switching back does not preserve what you typed in the branch you left — that is how the option type has always behaved, and it is what keeps the saved value small.

The preview does not open or close

The canvas shows whatever initially_open says — the state a visitor arrives to. Clicking a header would toggle a panel rather than select the block, and with multiple_open off, opening one would close another: a preview that changes what it is previewing.

Panel content is edited in the Items repeater in the sidebar.

caution
faq_schema marks this up as questions and answers

Only turn it on when the panels really are an FAQ. Search engines treat FAQ markup on a spec sheet or a set of product tabs as a mismatch, and mismatched structured data is worth less than none.

Custom icon uploads stay in the page builder

icon_closed_image and icon_open_image apply to a single icon_style. A pair of uploads that does nothing until a third setting changes is a poor thing to meet in a sidebar, so they are one surface away.