Details & Summary

2

Les balises <détails> 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 <détails> 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:

Voir le CodePen de Simon Arnold (@smnarnold).

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:

Voir le CodePen de Simon Arnold (@smnarnold).

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:

Voir le CodePen de Simon Arnold (@smnarnold).

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:

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN à propos de details et summary.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme