Details & SummaryLes 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.
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:
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: