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;
}