MEILLEUR SITE POUR LES DÉVELOPPEURS WEB
HTML5. W3Schools en français. Le guide complet des tags

En Ua Es De

Balise HTML <details>


Exemple

Spécifiez les détails que l'utilisateur peut ouvrir et fermer à la demande :

<details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
Try it Yourself »

Plus d'exemples "Try it Yourself" (« Essayez-le vous-même ») ci-dessous.


Définition et utilisation

La balise <details> spécifie des détails supplémentaires que l'utilisateur peut ouvrir et fermer à la demande.

La balise <details> est souvent utilisée pour créer un widget interactif que l'utilisateur peut ouvrir et fermer. Par défaut, le widget est fermé. Une fois ouvert, il se développe et affiche le contenu qu'il contient.

Tout type de contenu peut être placé dans la balise <details>.

Conseil : La balise <summary> est utilisée en conjonction avec <details> pour spécifier un en-tête visible pour les détails.


Prise en charge du navigateur

Les nombres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge l'élément.

Élément
<details> 12.0 79.0 49.0 6.0 15.0

Attributs

Attribut Valeur Description
open open Spécifiez que les détails doivent être visibles (ouverts) à l'utilisateur

Attributs globaux

La balise <details> prend également en charge les Attributs globaux en HTML.


Attributs de l'événement

La balise <details> prend également en charge les Attributs d'événement en HTML.


Plus d'exemples

Exemple

Utilisez CSS pour styliser <details> et <summary>:

<html>
<style>
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}

details > p {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>

<details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

</body>
</html>
Try it Yourself »

Pages connexes

Référence HTML DOM : Détails Objectif.


Paramètres CSS par défaut

La plupart des navigateurs afficheront l'élément <details> avec les valeurs par défaut suivantes :

details {
  display: block;
}