Details & Summary

Les balises <details> et <summary> permettent d'afficher/masquer un contenu en fonction du clique de l'utilisateur, le tout sans même avoir recours à du JavaScript. Ces balises sont utilisées notamment pour créer des FAQ, des questions quiz, etc.

Details

La balise <details> sert à englober le contenu devant être affiché/masqué. Par défaut, le contenu est masqué et au clic de l'utilisateur, il se révèle.

Par exemple:

Lorsque la balise <details> est ouverte, le navigateur lui ajoute l'attribut open. Ainsi, il est possible de spécifier qu'une balise <details> devrait être ouverte par défaut en lui ajoutant cet attribut.

Par exemple:

Il est aussi possible de se baser sur cet attribut afin de spécifier des styles différents selon si la balise <details> est ouverte ou fermée.

Par exemple, lui spécifier un fond vert, mais uniquement lorsque la balise est ouverte:

Summary

La balise <summary> placée à l'intérieur de la balise <details> permet de spécifier le texte affiché par défaut plutôt que la mention "Details".

Par exemple: