path: root/files/fr/web/html/element/details/index.html

---
title: <details>
slug: Web/HTML/Element/details
tags:
  - Element
  - HTML
  - Reference
  - Web
translation_of: Web/HTML/Element/details
---
<div>{{HTMLRef}}</div>

<p>L'élément HTML <strong><code>&lt;details&gt;</code></strong> est utilisé comme un outil permettant de révéler une information. Un résumé ou un intitulé peuvent être fournis grâce à un élément {{HTMLElement("summary")}}.</p>

<p>La plupart du temps, le contrôle utilisé pour cet élément est un triangle qui est tourné ou tordu afin d'indiquer si l'élément est révélé ou non. Si le premier élément fils de l'élément <code>&lt;details&gt;</code> est un élément <code>&lt;summary&gt;</code>, c'est le contenu de ce dernier qui est utilisé comme intitulé pour le contenu à révéler (l'intitulé est donc toujours visible).</p>

<div>{{EmbedInteractiveExample("pages/tabbed/details.html", "tabbed-standard")}}</div>

<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>

<h2 id="Attributs">Attributs</h2>

<p>Comme tous les éléments HTML, cet élément accepte les <a href="/fr/docs/Web/HTML/Attributs_universels" title="fr/HTML/Global_attributes">attributs universels</a>.</p>

<dl>
 <dt>{{htmlattrdef("open")}}</dt>
 <dd>Cet attribut booléen indique si les détails seront affichés lors du chargement de la page. La valeur par défaut est <code>false</code> (les détails sont alors cachés).</dd>
</dl>

<h2 id="Évènement_toggle">Évènement <code>toggle</code></h2>

<p>En plus des évènements classiques pris en charge par les éléments HTML, l'élément <code>&lt;details&gt;</code> prend en charge l'évènement {{event("toggle")}} qui est envoyé sur l'élément lorsque son état change entre ouvert et fermé (que ce soit dans un sens ou dans l'autre). L'évènement est envoyé après que l'état ait été changé et si plusieurs changement d'état ont eu lieu avant que le navigateur envoie l'évènement, le navigateur fusionnera ces évènements en un seul.</p>

<p>On peut alors écouter cet évènement en JavaScript afin de détecter le changement d'état du contrôle :</p>

<pre class="brush: js">detailsElem.addEventListener("toggle", function(evt){
  if(detailsElem.open) {
    /* l'état est passé en "ouvert" */
  } else {
    /* l'état est passé en "fermé" */
  }
}, false);</pre>

<h2 id="Exemples">Exemples</h2>

<h3 id="Un_exemple_simple">Un exemple simple</h3>

<p>Dans cet exemple, on utilise un élément <code>&lt;details&gt;</code> sans résumé/intitulé.</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;details&gt;
  &lt;p&gt;Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.&lt;/p&gt;
&lt;/details&gt;</pre>

<p>Ici, le navigateur utilisera alors un intitulé par défaut (généralement, ce sera "Détails").</p>

<h4 id="Résultat">Résultat</h4>

<p>{{EmbedLiveSample("Un_exemple_simple", 650, 150)}}</p>

<h3 id="Fournir_un_résumé">Fournir un résumé</h3>

<p>Dans cet exemple, on ajoute un résumé grâce à l'élément {{HTMLElement("summary")}} qu'on imbrique au début de l'élément <code>&lt;details&gt;</code> :</p>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html">&lt;details&gt;
  &lt;summary&gt;System Requirements&lt;/summary&gt;
  &lt;p&gt;Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.&lt;/p&gt;
&lt;/details&gt;</pre>

<h4 id="Résultat_2">Résultat</h4>

<p>{{EmbedLiveSample("Fournir_un_résumé", 650, 150)}}</p>

<h3 id="Créer_un_contrôle_déja_ouvert">Créer un contrôle déja ouvert</h3>

<p>Pour obtenir une boîte <code>&lt;details&gt;</code> dans un état ouvert, il suffit d'ajouter l'attribut booléen <code>open</code> :</p>

<h4 id="HTML_3">HTML</h4>

<pre class="brush: html">&lt;details open&gt;
  &lt;summary&gt;System Requirements&lt;/summary&gt;
  &lt;p&gt;Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.&lt;/p&gt;
&lt;/details&gt;</pre>

<h4 id="Résultat_3">Résultat</h4>

<p>{{EmbedLiveSample("Créer_un_contrôle_déja_ouvert", 650, 150)}}</p>

<h3 id="Personnaliser_l’apparence">Personnaliser l’apparence</h3>

<p>Utilisons un peu de CSS afin de personnaliser l'apparence du contrôle fourni par <code>&lt;details&gt;</code>.</p>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">details {
  font: 16px "Open Sans", "Arial", sans-serif;
  width: 620px;
}

details &gt; summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
}

details &gt; p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}
</pre>

<p>Ce fragment de feuille de style CSS crée une apparence similaire à un onglet où, lorsqu'on clique sur l'onglet, il s'étend et révèle le contenu.</p>

<h4 id="HTML_4">HTML</h4>

<pre class="brush: html">&lt;details&gt;
  &lt;summary&gt;System Requirements&lt;/summary&gt;
  &lt;p&gt;Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.&lt;/p&gt;
&lt;/details&gt;</pre>

<h4 id="Résultat_4">Résultat</h4>

<p>{{EmbedLiveSample("Personnaliser_l’apparence", 650, 150)}}</p>

<h3 id="Personnaliser_le_marqueur_de_révélation">Personnaliser le marqueur de révélation</h3>

<p>Le triangle généralement utilisé peut également être personnalisé. Toutefois, cette fonctionnalité a été standardisée récemment et n'est pas encore largement prise en charge. De plus, la méthode de prise en charge varie encore d'un navigateur à un autre.</p>

<p>L'élément {{HTMLElement("summary")}} permet d'utiliser la propriété raccourcie {{cssxref("list-style")}} ainsi que les propriétés détaillées associées (telle que {{cssxref("list-style-type")}}) afin de modifier l'icône utilisée pour le contrôle.</p>

<p>Il est possible de retirer l'icône en utilisant la valeur <code>none</code> pour la propriété <code>list-style</code>. Il est aussi possible d'utiliser d'autres valeurs sur <code>list-style</code> afin de configurer l'apparence du contrôle.</p>

<p>Actuellement, Chrome ne prend pas en charge cette fonctionnalité et il faut utiliser <a href="/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments">le pseudo-élément</a> spécifique <code>::-webkit-details-marker</code> afin de personnaliser l'apparence.</p>

<p>Pour une meilleure compatibilité à court terme, vous pouvez utiliser <code>display: none</code> sur l'élément <code>&lt;summary&gt;</code> afin de désactiver l'affichage du contrôle.</p>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css; highlight:[12, 15-17]">details {
  font: 16px "Open Sans", "Arial", sans-serif;
  width: 620px;
}

details &gt; summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  list-style: none;
}

details &gt; summary::-webkit-details-marker {
  display: none;
}

details &gt; p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}
</pre>

<h4 id="HTML_5">HTML</h4>

<pre class="brush: html">&lt;details&gt;
  &lt;summary&gt;System Requirements&lt;/summary&gt;
  &lt;p&gt;Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.&lt;/p&gt;
&lt;/details&gt;</pre>

<h4 id="Résultat_5">Résultat</h4>

<p>{{EmbedLiveSample("Personnaliser_le_marqueur_de_révélation", 650, 150)}}</p>

<h2 id="Résumé_technique">Résumé technique</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, racine de section, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
  </tr>
  <tr>
   <th scope="row"><dfn>Contenu autorisé</dfn></th>
   <td>Un élément {{HTMLElement("summary")}} suivi par du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
  </tr>
  <tr>
   <th scope="row"><dfn>Omission de balises</dfn></th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row"><dfn>Parents autorisés</dfn></th>
   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
  </tr>
  <tr>
   <th scope="row">Rôles ARIA autorisés</th>
   <td>Aucun.</td>
  </tr>
  <tr>
   <th scope="row"><dfn>Interface DOM</dfn></th>
   <td>{{domxref("HTMLDetailsElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-details-element', '&lt;details&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-details-element', '&lt;details&gt;')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>

<p>{{Compat("html.elements.details")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{HTMLElement("summary")}}</li>
</ul>