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: