HTML <details> Tag
Exemple
Spécifiez les détails que l'utilisateur peut ouvrir et fermer à la demande :
<details>
<summary>Centre Epcot</summary>
<p>Epcot est un parc à thème situé au Walt Disney World Resort, proposant des attractions passionnantes, des pavillons internationaux, des feux d'artifice primés et des événements spéciaux saisonniers.</p>
</details> Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et Utilisation
Le <details> tag spécifie des détails supplémentaires que l'utilisateur peut ouvrir et fermer à la demande.
Le <details> tag est souvent utilisé 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 s'étend et affiche le contenu à l'intérieur.
Tout type de contenu peut être placé à l'intérieur du <details> tag.
Astuce : Le <summary> tag est utilisé en conjonction avec <details> pour spécifier un en-tête visible pour les détails.
Support des Navigateurs
Les chiffres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge l'élément.
| Élément | |||||
|---|---|---|---|---|---|
| <details> | 12 | 79 | 49 | 6 | 15 |
| name | 120 | 120 | 130 | 17.2 | 106 |
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| open | open | Spécifie que les détails doivent être visibles (ouverts) pour l'utilisateur |
| name | groupname | Spécifie un nom de groupe - en utilisant le même nom pour plusieurs éléments <details>, l'utilisateur ne peut ouvrir qu'une seule boîte de dialogue à la fois |
Attributs Globaux
Le <details> tag prend également en charge les Attributs Globaux en HTML .
Attributs d'Événement
Le <details> tag 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>Centre Epcot</summary>
<p>Epcot est un parc à thème situé au Walt Disney World Resort, proposant des attractions passionnantes, des pavillons internationaux, des feux d'artifice primés et des événements spéciaux saisonniers.</p>
</details>
</body>
</html> Pages Associées
Référence DOM HTML : Objet Détails
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;
}