Balise HTML <détails>
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>
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La <details>balise spécifie des détails supplémentaires que l'utilisateur peut ouvrir et fermer à la demande.
La <details>balise est souvent utilisée pour créer un widget interactif que l'utilisateur peut ouvrir et fermer. Par défaut, le widget est fermé. Lorsqu'il est ouvert, il se développe et affiche le contenu qu'il contient.
Tout type de contenu peut être placé à l'intérieur de la <details>balise.
Conseil : La balise <summary> est utilisée conjointement avec <details>pour spécifier un en-tête visible pour les détails.
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge l'élément.
| Element | |||||
|---|---|---|---|---|---|
| <details> | 12.0 | 79.0 | 49.0 | 6.0 | 15.0 |
Les attributs
| Attribute | Value | Description |
|---|---|---|
| open | open | Specifies that the details should be visible (open) to the user |
Attributs globaux
La <details>balise prend également en charge les attributs globaux en HTML .
Attributs d'événement
La <details>balise 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>
Pages connexes
Référence HTML DOM : Détails de l'objet
Paramètres CSS par défaut
La plupart des navigateurs afficheront l' <details>élément avec les valeurs par défaut suivantes :
details {
display: block;
}