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), ou tapez faq dans la recherche des blocs. Un premier pli est créé avec lui.
- Cliquez sur le titre du pli, marqué Titre…, puis écrivez la question.
- Appuyez sur
Entrée. Le curseur passe au début du premier bloc de la réponse.Maj+Entréepasse à la ligne dans le titre. - Écrivez la réponse. Elle accepte n’importe quel bloc.
- 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+TetCtrl+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 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, 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).
| 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). 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).
Les couleurs, la typographie et les bordures se règlent comme sur tout bloc : voir Colorer un bloc, Mettre en forme un texte et Régler la taille, les bordures et les 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). 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.