# 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](https://lovelyrender.com/documentation/add-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

| Block | Role | States |
| --- | --- | --- |
| **Accordion** | All the items, in a grid. It only accepts items. | **Default**, **Hover**, **Active** |
| **Accordion item** | One section: a title and a panel, locked together. | **Default**, **Hover**, **Active**, the state of the open item |
| **Accordion heading** | The question, the one the visitor clicks. | **Default**, **Hover**, **Focus**, **Active** |
| **Accordion panel** | The answer, shown when the item is open. | **Default**, **Hover**, **Active** |

## Set up the accordion

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

| Setting | Effect | Default value |
| --- | --- | --- |
| **Can’t be closed** | All items stay open. The titles are no longer clickable, the symbol disappears and the other settings in the panel are disabled. | Off |
| **Opening mode** | **One at a time**: opening an item closes the one that was open. **Multiple**: several items stay open together. As long as several items are open by default, **One at a time** is grayed out. | **One at a time** |
| **All open by default** | Opens all the items when the page loads. Requires the **Multiple** mode. | Off |
| **Show symbol** | Shows the opening symbol next to the title. | On |
| **Symbol style** | The symbol takes one of four shapes: the + that rotates to form a ×, the + that becomes −, the chevron that flips from ↓ to ↑ and the chevron that rotates from → to ↓. Hover a shape to see the open state. | The rotating + |
| **Circle around symbol** | Puts a circle around the symbol. | Off |
| **Symbol position** | **Left** or **Right** of the title. | **Right** |

![The Accordion settings panel: Can't be closed turned off, Opening mode set to One at a time, All open by default grayed out, Show symbol turned on, the four symbol styles, Circle around symbol and Symbol position set to Right.](https://static.lovelyrender.com/uploads/2026/10/204-blocs-accordeon.png)

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](https://lovelyrender.com/documentation/table-of-contents-block/), 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](https://lovelyrender.com/documentation/save-block-style/)).

| Block | Style | Setting |
| --- | --- | --- |
| Accordion item | **Accordion item** | Nothing. It serves as an anchor for your settings. |
| Accordion heading | **Accordion question** | 8 px of space above and below the question. |
| Accordion panel | **Accordion answer** | 8 px of space below the answer. |

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](https://lovelyrender.com/documentation/adopt-catalog-design/)). 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](https://lovelyrender.com/documentation/animate-block/)).

Colors, typography and borders are set as on any block: see [Color a block](https://lovelyrender.com/documentation/color-block/), [Format text](https://lovelyrender.com/documentation/format-text/) and [Set size, borders and effects](https://lovelyrender.com/documentation/size-borders-effects/).

## On a phone

The accordion is a grid. In its **Grid layout** panel, you choose the number of columns per screen ([Container](https://lovelyrender.com/documentation/container-block/)). 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](https://lovelyrender.com/documentation/tabs-block/)
- [Table of contents](https://lovelyrender.com/documentation/table-of-contents-block/)
- [Save a block’s style](https://lovelyrender.com/documentation/save-block-style/)