<summary> : l'élément de révélation d'un résumé

Cet élément inclut uniquement les attributs universels.

Un élément <summary> peut contenir des éléments de titre, du texte simple ou tout contenu HTML pouvant être placé au sein d'un paragraphe.

Un élément <summary> peut uniquement être utilisé comme le premier élément fils d'un élément <details>. Lorsque l'utilisateur clique sur le résumé, l'élément <details> parent change d'état (affiché ou masqué) et un évènement toggle est envoyé à l'élément <details> (ce qui permet de détecter un changement d'état via un script).

Si l'élément <summary> est absent au sein d'un élément <details>, c'est le titre contenu dans l'élément <details> qui sera utilisé.

La mise en forme par défaut pour <summary> est display: list-item, tel qu'indiqué dans le standard HTML. Cela permet de modifier ou de retirer l'icône affiché pour le contrôle d'affichage/masquage. Par défaut, cette icône est généralement un triangle.

Si la mise en forme est surchargée avec display: block, l'icône triangulaire qui révèle le contenu sera masquée.

Voir la section ci-après sur la compatibilité des navigateurs à ce sujet car certains navigateurs ne prennent pas en charge tout ces aspects.

HTML

<details open>
  <summary>Détails produit</summary>
  <p>Ce produit a été fabriqué par ACME et respecte les pandas.</p>
</details>

Résultat

Il est possible d'utiliser des titres au sein d'un résumé.

HTML

<details open>
  <summary><h4>Détails produit</h4></summary>
  <ol>
    <li>Date de fabrication : 01 janvier 2018</li>
    <li>Numéro de lot : LMA2542501</li>
    <li>Date limite de consommation : 31 août 2018</li>
  </ol>
</details>

Résultat

HTML

<details open>
  <summary><strong>Détails</strong></summary>
  <ol>
    <li>Date de fabrication : 01 janvier 2018</li>
    <li>Numéro de lot : LMA2542501</li>
    <li>Date limite de consommation : 31 août 2018</li>
  </ol>
</details>

Résultat

• <details>