Balise <details> HTML

Définition et utilisation

<details> Balise qui permet à l'utilisateur d'ouvrir et de fermer d'autres détails selon ses besoins.

<details> Balise généralement utilisée pour créer des widgets interactifs que l'utilisateur peut ouvrir et fermer. Par défaut, le widget est fermé. Lorsqu'il est ouvert, il s'étend et affiche son contenu.

Tous types de contenu peuvent être placés dans <details> dans la balise.

Astuce :<summary>balise et <details> En combinaison, vous pouvez définir un titre visible pour les détails. Lorsque l'utilisateur clique sur le titre, il affiche <details> Contenu défini.

Voir également :

Manuel de référence HTML DOM :Objet Details

Exemple

Exemple 1

Définir des détails que l'utilisateur peut ouvrir et fermer à sa demande :

<details>
  <summary>Le centre du monde futur (Epcot Center)</summary>
  <p>Epcot est un parc à thèmes du complexe Walt Disney World Resort, avec des attractions captivantes, des pavillons internationaux, des feux d'artifice primés et des activités saisonnières.</p>
</details>

Essayez-le vous-même

Exemple 2

Définir les styles de <details> et <summary> en utilisant CSS :

<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>Le centre du monde futur (Epcot Center)</summary>
  <p>Epcot est un parc à thèmes du complexe Walt Disney World Resort, avec des attractions captivantes, des pavillons internationaux, des feux d'artifice primés et des activités saisonnières.</p>
</details>
</body>
</html>

Essayez-le vous-même

Attribut

Attribut Valeur Description
open open Définit que les détails doivent être visibles pour l'utilisateur (ouverts).

Attributs globaux

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

Attributs événementiels

<details> La balise prend également en charge Attributs événementiels dans HTML.

Réglages CSS par défaut

La plupart des navigateurs utiliseront les valeurs suivantes par défaut pour afficher <details> Élément :

details {
  display: block;
}

Prise en charge du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge le premier élément.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
12.0 79.0 49.0 6.0 15.0