Accordion

The block Accordion presents a series of collapsible sections. In a FAQ, the visitor opens a question to read its answer. This page covers its blocks, its opening and symbol settings, its styling, and its behavior on phones and with the keyboard.

Add the block

Insert the block Accordion (Add a block), or type faq in the block search. A first item is created with it.

1. Click the title of the item, marked Heading…, then write the question.
2. Press Enter. The cursor moves to the start of the first block of the answer. Shift+Enter starts a new line in the title.
3. Write the answer. It accepts any block.
4. To add the next question, click the + of the accordion. On a selected item, Add before and Add after in the ⋮ menu, or Ctrl+Alt+T and Ctrl+Alt+Y, place an item right before or right after.

In the editor as on the site, a closed item shows only its question. Select it, or a block of its answer, to see the answer and write it.

The blocks that make up the accordion

Set up the accordion

Select the block Accordion, open the Settings tab then the Accordion settings panel. These settings apply to all its items.

The symbol is one and a quarter times the height of the title text and takes its color. It changes appearance smoothly when opening. For a visitor who asks for fewer animations, it changes at once.

An item open on load

Select an item. In the Settings tab, Pleat settings panel, turn on Open by default: this item is expanded when the page loads.

• In One at a time mode, only one item can be open by default: the setting is grayed out on the other items.
• With Can’t be closed or All open by default on the accordion, all the items are open and this setting is locked.

The heading level of a question

Each question is a level 3 heading. An accordion most often follows a level 2 heading: this way Google understands that the question belongs to that section. To change the level, select the question, then open the Settings tab and the Heading settings panel. Choose a Heading level from H1 to H6, or No heading for a question that is not a heading.

The level does not change the look of the question. Questions do not appear in the Table of contents, which lists only Heading blocks.

Style the items

Without a style, the items follow one another with no gap, like the lines of a menu. For a FAQ, apply the saved style FAQ to the accordion in the Styles tab. It puts 16 px between each question and the next. You set this gap once for all the FAQs of the site (Save a block’s style).

The Accordion part of the Design catalog gives all the accordions of the site their frame and the lines between questions: Divided, Enclosed or Ghost (Adopt a design from the catalog). The FAQ style keeps your settings.

An open item takes the Active state and loses it when it closes. Select the item, open the Styles tab and choose the Active state: a background color or a border set in this state styles the open item. In the item’s Animations tab, Pass the active state to children gives this state to its question and its answer. A block in the answer can also enter with an animation triggered When activated (Animate a block).

Colors, typography and borders are set as on any block: see Color a block, Format text and Set size, borders and effects.

On a phone

The accordion is a grid. In its Grid layout panel, you choose the number of columns per screen (Container). For example, you can place two columns of questions on desktop and a single one on phones.

Accessibility

Each item is a native expanding element of the browser. It works without a script and with the keyboard: Tab reaches the question, Enter or Space opens or closes the item. A screen reader announces whether the item is open or closed.

The question is a real heading, of the level you choose: a screen reader finds it in the list of headings of the page.

See also

• Tabs
• Table of contents
• Save a block’s style