Outils HTML

Gratuit Generateur d'accordeon HTML details

Générez des accordeons FAQ avec les elements natifs details et summary sans JavaScript.

Chargement de l'outil...

Qu'est-ce que Generateur d'accordeon HTML details ?

Les elements details et summary creent des panneaux repliables natifs en HTML. Le summary est toujours visible et fait office de bouton de bascule. Lorsqu'on clique dessus, le reste du contenu du details se developpe. Plusieurs details ouverts peuvent etre exclusifs, creant un comportement d'accordéon, grace a l'attribut name. Cela fonctionne sans aucun JavaScript.

Réponse rapide

Utilisez les elements natifs HTML details et summary pour creer un accordéon qui fonctionne sans JavaScript. Chaque element details est independant et peut etre ouvert ou ferme par l'utilisateur.

Last updated: 2026-05-25

Limites

Les elements details natifs ne prennent pas en charge la fermeture automatique d'une section lorsqu'une autre s'ouvre. Ce comportement necessite du JavaScript personnalise ou l'attribut name pour un comportement d'accordéon exclusif.
L'attribut open controle si l'element details commence déplié. Un seul état booleen est disponible -- il n'y a pas de dépliage partiel.
Safari 17 et inferieur ne prennent pas en charge l'animation de l'ouverture et de la fermeture de l'element details.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

Saisissez les elements que vous souhaitez dans l'accordéon sous forme de paires titre|contenu, une par ligne.
Choisissez le mode exclusif ou multi-ouverture pour le comportement de l'accordéon.
L'outil genere le HTML details/summary avec le style CSS.
Copiez le balisage et le CSS dans votre page.

A quoi il sert

Construire un accordéon FAQ pour une page de produit ou de service.
Creer des sections de documentation repliables pour un site de reference.
Ajouter des blocs de contenu extensibles dans un article de blog pour du contenu long.

Cas d'usage

Exemples concrets

Exemple

Page FAQ avec accordéon exclusif

Une page FAQ utilise le mode accordéon exclusif afin que l'ouverture d'une question ferme les autres. L'attribut name sur chaque element details impose ce comportement.

Exemple

Page de recette avec sections repliables

Une page de recette utilise des sections repliables pour les ingrédients et les instructions. Chaque section s'ouvre independamment car l'accordéon utilise le mode multi-ouverture.

Erreurs frequentes

Masquer le triangle de divulgation par defaut sans fournir d'indicateur de bascule visible.
Utiliser details pour du contenu critique qui doit toujours être visible.
Ne pas styliser l'element summary pour qu'il paraisse cliquable avec un style de survol ou de curseur.

Vérification

Cliquez sur chaque section de l'accordéon pour vérifier qu'elle s'ouvre et se ferme independamment sans erreurs JavaScript.
Testez la page avec JavaScript desactive pour confirmer que l'accordéon fonctionne toujours comme amélioration progressive.

FAQ

Questions sur Generateur d'accordeon HTML details

Comment faire pour qu'un seul details soit ouvert a la fois ?

Ajoutez le meme attribut name a chaque element details. Cela cree un comportement d'accordéon exclusif ou l'ouverture d'un element ferme les autres.

L'element details fonctionne-t-il dans tous les navigateurs ?

Chrome 12+, Edge 79+, Safari 6+, Firefox 49+. Il bénéficie d'une compatibilité quasi universelle.

Comment animer l'ouverture et la fermeture d'un element details ?

L'ouverture/fermeture native ne peut pas être animée fluidement avec CSS seul. Vous pouvez animer la hauteur du contenu avec une transition CSS sur le pseudo-element ::details-content dans les navigateurs compatibles (Chrome 131+), ou utiliser un petit script JavaScript.

Puis-je utiliser l'element details pour une section FAQ avec plusieurs éléments extensibles ?

Oui. L'utilisation d'attributs name sur les elements details cree un comportement d'accordéon exclusif. Chaque element details encapsule une question (dans summary) et sa réponse (dans le contenu après summary). Les lecteurs d'ecran reconnaissent l'etat developpe/replié de manière native.

Outils lies