Accordions

Stack titled panels that open and close, so a long run of questions or reference material fits on one page and visitors expand only the parts they need. It is shown in the block inserter as Canvas Accordion and registered as canvas-core/accordion.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Settings

• Accordion ItemsDefaultEmpty

  The panels the accordion is built from, in the order they appear. Each row is one heading and the content it opens.

  Each row of Accordion Items takes:

  • TitleDefaultEmpty

    The heading a visitor clicks to open this panel.

  • ContentDefaultEmpty

    What this panel reveals once it is opened.

  • Hash IDDefaultEmpty

    An anchor name for this panel. A visitor arriving on a link that ends in # followed by this name lands with the panel already open, which is how you send someone straight to one answer in a list of questions.

  • Header Text ColorDefaultEmpty

    Text colour for the heading of this panel, in place of the colour set for the whole accordion.

  • Header Background ColorDefaultEmpty

    Background colour for the heading of this panel, in place of the colour set for the whole accordion.

  • Step NumberDefaultEmpty

    Optional step badge shown before this item’s title (used by the Timeline / Step style). Leave empty to disable.

  • Header ClassesDefaultEmpty

    Extra utility classes on this item’s .accordion-header.

  • Title ClassesDefaultEmpty

    Extra utility classes on this item’s .accordion-title.

  • Content ClassesDefaultEmpty

    Extra utility classes on this item’s .accordion-content.

• Icon TypeDefaultCheck / X

  Which pair of icons marks a panel as closed and as open. Choose None for headings with no icon at all, or Custom to pick the pair yourself.

  ChoicesCheck / XPlus / MinusChevronArrowCustomNone

• Closed IconDefaultEmpty

  The icon every heading shows while its panel is closed.

  Shown when Icon Type is "Custom"

• Open IconDefaultEmpty

  The icon a heading swaps to while its panel is open.

  Shown when Icon Type is "Custom"

• Icon PositionDefaultLeft

  Which side of the heading the open/close icon sits on. A panel that shows a Step Number always puts the icon on the right, since the number takes the left.

  ChoicesLeftRight

• Allow Closing an Open PanelDefaultOff

  Lets a visitor click an open heading to close it again, so the accordion can be left with nothing showing.

• Allow Multiple OpenDefaultOff

  Opening a panel leaves the others as they are, so a visitor can read several at once. Closing a panel again is switched on with it.

• Default Active ItemDefault1

  Which panel is open when the page loads, counting from 1. A link carrying a panel Hash ID wins over this.

• Default StateDefaultOpen

  Whether the accordion arrives with its default panel already open, or with every panel closed so the visitor chooses what to read.

  ChoicesOpenClosed

• Active CSS ClassDefaultEmpty

  An extra class placed on the heading of the open panel, alongside the one the accordion already uses, so a design can style the open state its own way.

• StyleDefaultBasic

  The look of the accordion: plain rows, filled or outlined panels, separated cards, a coloured edge down the left, or a numbered timeline.

  ChoicesBasicBackgroundBackground VariedBorderLargeFlushCard / SeparatedLeft AccentTimeline / Step

Style

• Header Text ColorDefaultEmpty

  Text colour of every panel heading.

• Header Background ColorDefaultEmpty

  Background colour behind every panel heading.

• Header Border ColorDefaultEmpty

  Colour of the dividing lines around the panel headings. Styles that draw no border ignore it.

• Content Background ColorDefaultEmpty

  Background colour behind the content a panel reveals.

• Active Header Text ColorDefaultEmpty

  Text colour of a heading while its panel is open, so the open one stands out from the rest.

• Active Header BackgroundDefaultEmpty

  Background colour of a heading while its panel is open.

Related

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Interactive: AJAX Buttons, Carousels, Cookie Consent, Countdowns, Flip Cards, Galleries.