# Accordéon

Le bloc **Accordéon** présente une suite de sections repliables. Dans une foire aux questions, le visiteur ouvre une question pour lire sa réponse. Cette page décrit ses blocs, ses réglages d’ouverture et de symbole, son habillage et son comportement sur téléphone et au clavier.

## Ajouter le bloc

Insérez le bloc **Accordéon** ([Ajouter un bloc](https://lovelyrender.com/fr/documentation/ajouter-un-bloc/)), ou tapez `faq` dans la recherche des blocs. Un premier pli est créé avec lui.

1. Cliquez sur le titre du pli, marqué **Titre…**, puis écrivez la question.
2. Appuyez sur `Entrée`. Le curseur passe au début du premier bloc de la réponse. `Maj+Entrée` passe à la ligne dans le titre.
3. Écrivez la réponse. Elle accepte n’importe quel bloc.
4. Pour ajouter la question suivante, cliquez sur le **+** de l’accordéon. Sur un pli sélectionné, **Ajouter avant** et **Ajouter après** du menu **⋮**, ou `Ctrl+Alt+T` et `Ctrl+Alt+Y`, placent un pli juste avant ou juste après.

Dans l’éditeur comme sur le site, un pli fermé ne montre que sa question. Sélectionnez-le, ou un bloc de sa réponse, pour voir la réponse et l’écrire.

## Les blocs qui composent l’accordéon

| Bloc | Rôle | États |
| --- | --- | --- |
| **Accordéon** | L’ensemble des plis, en grille. Il n’accepte que des plis. | **Par défaut**, **Survol**, **Actif** |
| **Pli d’accordéon** | Une section : un titre et un panneau, verrouillés ensemble. | **Par défaut**, **Survol**, **Actif**, l’état du pli ouvert |
| **Titre d’accordéon** | La question, celle sur laquelle le visiteur clique. | **Par défaut**, **Survol**, **Focus**, **Actif** |
| **Panneau d’accordéon** | La réponse, affichée quand le pli est ouvert. | **Par défaut**, **Survol**, **Actif** |

## Régler l’accordéon

Sélectionnez le bloc **Accordéon**, ouvrez l’onglet **Réglages** puis le panneau **Réglages de l’accordéon**. Ces réglages valent pour tous ses plis.

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Ne peut pas être fermé** | Tous les plis restent ouverts. Les titres ne sont plus cliquables, le symbole disparaît et les autres réglages du panneau sont désactivés. | Désactivé |
| **Mode d’ouverture** | **Un à la fois** : ouvrir un pli referme celui qui était ouvert. **Multiple** : plusieurs plis restent ouverts ensemble. Tant que plusieurs plis sont ouverts par défaut, **Un à la fois** est grisé. | **Un à la fois** |
| **Tous ouverts par défaut** | Ouvre tous les plis au chargement de la page. Demande le mode **Multiple**. | Désactivé |
| **Afficher le symbole** | Affiche le symbole d’ouverture à côté du titre. | Activé |
| **Style du symbole** | Le symbole prend l’une de quatre formes : le + qui pivote pour former un ×, le + qui devient −, le chevron qui bascule de ↓ à ↑ et le chevron qui pivote de → à ↓. Survolez une forme pour voir l’état ouvert. | Le + qui pivote |
| **Cercle autour du symbole** | Entoure le symbole d’un cercle. | Désactivé |
| **Position du symbole** | **Gauche** ou **Droite** du titre. | **Droite** |

![Le panneau Réglages de l’accordéon : Ne peut pas être fermé désactivé, Mode d’ouverture sur Un à la fois, Tous ouverts par défaut grisé, Afficher le symbole activé, les quatre styles de symbole, Cercle autour du symbole et Position du symbole sur Droite.](https://static.lovelyrender.com/uploads/2026/10/204-blocs-accordeon.png)

Le symbole mesure une fois et quart la hauteur du texte du titre et prend sa couleur. Il change d’aspect en douceur à l’ouverture. Pour un visiteur qui demande moins d’animations, il change d’un coup.

### Un pli ouvert au chargement

Sélectionnez un pli. Dans l’onglet **Réglages**, panneau **Réglages du pli**, activez **Ouvert par défaut** : ce pli est déplié au chargement de la page.

- En mode **Un à la fois**, un seul pli peut être ouvert par défaut : le réglage est grisé sur les autres plis.
- Avec **Ne peut pas être fermé** ou **Tous ouverts par défaut** sur l’accordéon, tous les plis sont ouverts et ce réglage est verrouillé.

### Le niveau de titre d’une question

Chaque question est un titre de niveau 3. Un accordéon suit le plus souvent un titre de niveau 2 : Google comprend ainsi que la question appartient à cette section. Pour changer de niveau, sélectionnez la question, puis ouvrez l’onglet **Réglages** et le panneau **Réglages du titre**. Choisissez un **Niveau de titre** de **H1** à **H6**, ou **Aucun titre** pour une question qui n’est pas un titre.

Le niveau ne change pas l’apparence de la question. Les questions n’entrent pas dans le [Sommaire](https://lovelyrender.com/fr/documentation/bloc-table-des-matieres/), qui ne liste que les blocs Titre.

## Habiller les plis

Sans style, les plis se suivent sans écart comme les lignes d’un menu. Pour une foire aux questions, appliquez à l’accordéon le style enregistré **FAQ** dans l’onglet **Styles**. Il écarte chaque question de la suivante de 16 px. Vous réglez cet écart une fois pour toutes les FAQ du site ([Enregistrer le style d’un bloc](https://lovelyrender.com/fr/documentation/styles-enregistres/)).

| Bloc | Style | Réglage |
| --- | --- | --- |
| Pli d’accordéon | **Pli d’accordéon** | Rien. Il sert de point d’appui à vos réglages. |
| Titre d’accordéon | **Question d’accordéon** | 8 px d’espace au-dessus et au-dessous de la question. |
| Panneau d’accordéon | **Réponse d’accordéon** | 8 px d’espace sous la réponse. |

La partie **Accordéon** du catalogue de design donne à tous les accordéons du site leur cadre et les traits entre les questions : **Lignes**, **Encadré** ou **Nu** ([Adopter un design du catalogue](https://lovelyrender.com/fr/documentation/catalogue-de-design/)). Le style **FAQ** garde vos réglages.

Un pli ouvert prend l’état **Actif** et le perd quand il se ferme. Sélectionnez le pli, ouvrez l’onglet **Styles** et choisissez l’état **Actif** : une couleur de fond ou une bordure réglée dans cet état habille le pli ouvert. Dans l’onglet **Animations** du pli, **Transmettre l’état actif aux enfants** donne cet état à sa question et à sa réponse. Un bloc de la réponse peut aussi entrer avec une animation déclenchée **Quand il est activé** ([Animer un bloc](https://lovelyrender.com/fr/documentation/animations/)).

Les couleurs, la typographie et les bordures se règlent comme sur tout bloc : voir [Colorer un bloc](https://lovelyrender.com/fr/documentation/couleurs-d-un-bloc/), [Mettre en forme un texte](https://lovelyrender.com/fr/documentation/typographie/) et [Régler la taille, les bordures et les effets](https://lovelyrender.com/fr/documentation/taille-bordures-effets/).

## Sur téléphone

L’accordéon est une grille. Dans son panneau **Mise en page en grille**, vous choisissez le nombre de colonnes par écran ([Conteneur](https://lovelyrender.com/fr/documentation/bloc-conteneur/)). Vous pouvez par exemple poser deux colonnes de questions sur ordinateur et une seule sur téléphone.

## Accessibilité

Chaque pli est un élément de dépliage natif du navigateur. Il fonctionne sans script et s’utilise au clavier : `Tab` atteint la question, `Entrée` ou `Espace` ouvre ou ferme le pli. Un lecteur d’écran annonce si le pli est ouvert ou fermé.

La question est un vrai titre, du niveau que vous choisissez : un lecteur d’écran la retrouve dans la liste des titres de la page.

## Voir aussi

- [Onglets](https://lovelyrender.com/fr/documentation/bloc-onglets/)
- [Sommaire](https://lovelyrender.com/fr/documentation/bloc-table-des-matieres/)
- [Enregistrer le style d’un bloc](https://lovelyrender.com/fr/documentation/styles-enregistres/)