L'élément HTML <details> est utilisé comme un outil permettant de révéler une information. Un résumé ou un intitulé peuvent être fournis grâce à un élément <summary>.

La plupart du temps, le contrôle utilisé pour cet élément est un triangle qui est tourné ou tordu afin d'indiquer si l'élément est révélé ou non. Si le premier élément fils de l'élément <details> est un élément <summary>, c'est le contenu de ce dernier qui est utilisé comme intitulé pour le contenu à révéler (l'intitulé est donc toujours visible).

Catégories de contenu Contenu de flux, racine de section, contenu interactif, contenu tangible.
Contenu autorisé Un élément <summary> suivi par du contenu de flux.
Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
Parents autorisés Tout élément acceptant du contenu de flux.
Rôles ARIA autorisés Aucun.
Interface DOM HTMLDetailsElement

Attributs

Comme tous les éléments HTML, cet élément accepte les attributs universels.

open
Cet attribut booléen indique si les détails seront affichés lors du chargement de la page. La valeur par défaut est false (les détails sont alors cachés).

Évènement toggle

En plus des évènements classiques pris en charge par les éléments HTML, l'élément <details> prend en charge l'évènement toggle qui est envoyé sur l'élément lorsque son état change entre ouvert et fermé (que ce soit dans un sens ou dans l'autre). L'évènement est envoyé après que l'état ait été changé et si plusieurs changement d'état ont eu lieu avant que le navigateur envoie l'évènement, le navigateur fusionnera ces évènements en un seul.

On peut alors écouter cet évènement en JavaScript afin de détecter le changement d'état du contrôle :

detailsElem.addEventListener("toggle", function(evt){
  if(detailsElem.open) {
    /* l'état est passé en "ouvert" */
  } else {
    /* l'état est passé en "fermé" */
  }
}, false);

Exemples

Un exemple simple

Dans cet exemple, on utilise un élément <details> sans résumé/intitulé.

HTML

<details>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

Ici, le navigateur utilisera alors un intitulé par défaut (généralement, ce sera "Détails").

Résultat

Fournir un résumé

Dans cet exemple, on ajoute un résumé grâce à l'élément <summary> qu'on imbrique au début de l'élément <details> :

HTML

<details>
  <summary>System Requirements</summary>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

Résultat

Créer un contrôle déja ouvert

Pour obtenir une boîte <details> dans un état ouvert, il suffit d'ajouter l'attribut booléen open :

HTML

<details open>
  <summary>System Requirements</summary>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

Résultat

Personnaliser l'apparence

Utilisons un peu de CSS afin de personnaliser l'apparence du contrôle fourni par <details>.

CSS

details {
  font: 16px "Open Sans", "Arial", sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

Ce fragment de feuille de style CSS crée une apparence similaire à un onglet où, lorsqu'on clique sur l'onglet, il s'étend et révèle le contenu.

HTML

<details>
  <summary>System Requirements</summary>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

Résultat

Personnaliser le marqueur de révélation

Le triangle généralement utilisé peut également être personnalisé. Toutefois, cette fonctionnalité a été standardisée récemment et n'est pas encore largement prise en charge. De plus, la méthode de prise en charge varie encore d'un navigateur à un autre.

L'élément <summary> permet d'utiliser la propriété raccourcie list-style ainsi que les propriétés détaillées associées (telle que list-style-type) afin de modifier l'icône utilisée pour le contrôle.

Il est possible de retirer l'icône en utilisant la valeur none pour la propriété list-style. Il est aussi possible d'utiliser d'autres valeurs sur list-style afin de configurer l'apparence du contrôle.

Actuellement, Chrome ne prend pas en charge cette fonctionnalité et il faut utiliser le pseudo-élément spécifique ::-webkit-details-marker afin de personnaliser l'apparence.

Pour une meilleure compatibilité à court terme, vous pouvez utiliser display: none sur l'élément <summary> afin de désactiver l'affichage du contrôle.

CSS

details {
  font: 16px "Open Sans", "Arial", sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

HTML

<details>
  <summary>System Requirements</summary>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

Résultat

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<details>' dans cette spécification.
Standard évolutif  
HTML 5.1
La définition de '<details>' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 12Edge Aucun support Non
Notes
Aucun support Non
Notes
Notes Under consideration.
Firefox Support complet 49
Notes
Support complet 49
Notes
Notes Before Firefox 57, there was a bug meaning that <details> elements can't be made open by default using the open attribute if they have a CSS animation active on them.
IE Aucun support NonOpera Support complet 15Safari Support complet 6WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Aucun support NonFirefox Android Support complet 49
Notes
Support complet 49
Notes
Notes There is a bug meaning that <details> elements can't be made open by default using the open attribute if they have a CSS animation active on them.
Opera Android Support complet 14Safari iOS Support complet 6.1Samsung Internet Android Support complet Oui
openChrome Support complet 12Edge Aucun support Non
Notes
Aucun support Non
Notes
Notes Under consideration.
Firefox Support complet 49IE Aucun support NonOpera Support complet 15Safari Support complet 6WebView Android Support complet 4Chrome Android Support complet OuiEdge Mobile Aucun support NonFirefox Android Support complet 49Opera Android Support complet 14Safari iOS Support complet 6.1Samsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Dernière mise à jour par : SphinxKnight,