Docs HTML exécutables : Details et summary

Q: Comment ouvrir un élément details par défaut ?

Ajoutez l'attribut booléen open : . Le navigateur ajoute et retire cet attribut au fil des ouvertures et fermetures, donc le CSS peut styliser details[open].

Q: Comment faire un accordéon où une seule section est ouverte ?

Donnez à chaque du groupe le même attribut name, par exemple name="faq". En ouvrir un ferme les autres du groupe, sans JavaScript.

Q: Comment retirer ou changer la flèche d'un details summary ?

Définissez list-style: none sur summary et ajoutez summary::-webkit-details-marker { display: none; } pour Safari. Dessinez ensuite votre propre indicateur, par exemple avec summary::after, et changez-le avec details[open] summary::after.

Q: Peut-on détecter l'ouverture d'un élément details ?

Oui. Écoutez l'événement toggle sur l'élément et lisez sa propriété open. Définir details.open = true en JavaScript l'ouvre.

Du contenu repliable avec details et summary

Entourez le contenu de <details> et placez un <summary> en premier. Le summary reste visible ; tout le reste est masqué jusqu'à ce que le lecteur clique dessus :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>details</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <details>
    <summary>What is included in the free plan?</summary>
    <p>Five projects, community support and all the beginner courses.</p>
  </details>
</body>
</html>

Cliquez sur la question pour l'ouvrir, puis de nouveau pour la fermer. Le navigateur ajoute le marqueur triangulaire, rend le summary focalisable, le fait basculer avec Entrée ou Espace, et indique aux lecteurs d'écran s'il est déplié ou replié. Aucun JavaScript n'intervient.

Si vous omettez <summary>, le navigateur affiche à la place un libellé par défaut (« Détails » en français).

Ouvert par défaut

L'attribut booléen open affiche le contenu dès le départ. Le navigateur ajoute et retire open au fil des bascules du lecteur, c'est donc aussi la prise pour le style :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>open</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    details { border: 2px solid #e5e7eb; border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
    details[open] { border-color: #2563eb; }
    summary { cursor: pointer; font-weight: 600; }
  </style>
</head>
<body>
  <details open>
    <summary>Shipping</summary>
    <p>Orders ship within two working days.</p>
  </details>
  <details>
    <summary>Returns</summary>
    <p>Return any item within 30 days.</p>
  </details>
</body>
</html>

La boîte ouverte a une bordure bleue grâce à details[open]. Ouvrez « Returns » et elle devient bleue aussi ; les deux peuvent être ouvertes en même temps.

Accordéon : un seul ouvert à la fois

Donnez le même name à plusieurs éléments <details> et ils forment un groupe exclusif : en ouvrir un ferme les autres. Cela demandait autrefois du JavaScript et fonctionne désormais avec le seul attribut dans les versions actuelles de Chrome, Edge, Firefox et Safari :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Accordion</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .faq { max-width: 420px; border: 1px solid #e5e7eb; border-radius: 10px; }
    .faq details + details { border-top: 1px solid #e5e7eb; }
    .faq summary { padding: 12px 14px; cursor: pointer; font-weight: 600; }
    .faq p { margin: 0; padding: 0 14px 12px; color: #374151; }
  </style>
</head>
<body>
  <div class="faq">
    <details name="faq" open>
      <summary>Is it free?</summary>
      <p>Yes, the basics are free forever.</p>
    </details>
    <details name="faq">
      <summary>Do I need to install anything?</summary>
      <p>No, everything runs in the browser.</p>
    </details>
    <details name="faq">
      <summary>Can I cancel any time?</summary>
      <p>Yes, from your account settings.</p>
    </details>
  </div>
</body>
</html>

Ouvrez la deuxième question et la première se ferme. Retirez les attributs name et elles s'ouvrent de nouveau indépendamment. Un accordéon exclusif masque un contenu que le lecteur voudrait peut-être comparer, donc utilisez-le quand les sections sont des alternatives, et des <details> simples quand on peut vouloir en ouvrir plusieurs.

Styliser le marqueur

Le triangle est un marqueur de liste sur le summary. list-style: none le retire (la règle ::-webkit-details-marker couvre Safari), et un pseudo-élément peut dessiner votre propre indicateur :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom marker</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    details { max-width: 420px; background: #f9fafb; border-radius: 8px; margin-bottom: 8px; }
    summary {
      list-style: none; cursor: pointer;
      display: flex; justify-content: space-between; align-items: center;
      padding: 12px 14px; font-weight: 600;
    }
    summary::-webkit-details-marker { display: none; }
    summary::after {
      content: "+"; font-size: 20px; color: #2563eb;
      transition: transform 0.2s;
    }
    details[open] summary::after { transform: rotate(45deg); }
    summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; border-radius: 8px; }
    details p { margin: 0; padding: 0 14px 12px; }
  </style>
</head>
<body>
  <details>
    <summary>How long are the lessons?</summary>
    <p>Most lessons take five to ten minutes.</p>
  </details>
  <details>
    <summary>Do I get a certificate?</summary>
    <p>Yes, when you finish a course.</p>
  </details>
</body>
</html>

Le signe plus pivote de 45 degrés pour devenir une croix quand la section s'ouvre. Gardez un style de focus visible comme le contour :focus-visible ici : une fois le marqueur par défaut retiré, c'est sur l'anneau de focus que comptent les utilisateurs au clavier.

L'événement toggle et la propriété open

Le JavaScript peut lire et définir details.open, et l'événement toggle se déclenche après chaque changement, qu'il vienne d'un clic, d'une touche ou d'un script :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggle</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 4px 10px; margin-inline-end: 6px; }
    details { margin-top: 10px; border: 2px solid #e5e7eb; border-radius: 8px; padding: 8px 12px; }
    #log { color: #16a34a; }
  </style>
</head>
<body>
  <button id="expand">Expand all</button>
  <button id="collapse">Collapse all</button>
  <details><summary>Step 1</summary><p>Create an account.</p></details>
  <details><summary>Step 2</summary><p>Pick a course.</p></details>
  <p id="log">Nothing toggled yet.</p>
  <script>
    const all = document.querySelectorAll('details');
    all.forEach((d) => d.addEventListener('toggle', () => {
      document.getElementById('log').textContent =
        d.querySelector('summary').textContent + (d.open ? ' opened' : ' closed');
    }));
    document.getElementById('expand').onclick = () => all.forEach((d) => { d.open = true; });
    document.getElementById('collapse').onclick = () => all.forEach((d) => { d.open = false; });
  </script>
</body>
</html>

« Expand all » définit open sur les deux, et le journal affiche le dernier événement toggle. L'événement ne remonte pas, donc écoutez chaque élément <details> plutôt qu'un parent.

Que mettre dans un summary

Un summary contient du texte, des éléments inline, ou un titre quand le titre de la section appartient au plan de la page :

<details>
  <summary><h3>Refund policy</h3></summary>
  <p>...</p>
</details>

Évitez les liens, les boutons et les champs de formulaire dans <summary> : le summary est déjà un contrôle, donc un contrôle à l'intérieur passe facilement inaperçu ou se déclenche par erreur, et les lecteurs d'écran annoncent mal les contrôles imbriqués. Placez plutôt le contenu interactif dans le corps du <details>.

Erreurs fréquentes

Construire une bascule avec une <div> et du JavaScript. <details> gère déjà les clics, les touches et l'état pour les lecteurs d'écran. Quand vous avez vraiment besoin d'une bascule personnalisée, utilisez un bouton avec aria-expanded.
Placer <summary> ailleurs qu'en premier. Il doit être le premier enfant de <details>.
Masquer le marqueur sans le remplacer. Donnez aux lecteurs un signe que le summary s'ouvre, comme le signe plus ci-dessus.
Utiliser display pour masquer le contenu. Basculez plutôt open ; un CSS qui force le contenu visible ou masqué lutte contre l'état du navigateur.
Des groupes exclusifs pour un contenu que les gens comparent. N'utilisez name que lorsqu'une seule section ouverte à la fois a du sens.

Questions fréquentes

À quoi servent details et summary en HTML ?

<details> crée un widget de divulgation : une section qui peut s'ouvrir et se fermer. Son premier enfant, <summary>, est le libellé toujours visible ; un clic dessus (ou Entrée ou Espace quand il a le focus) affiche ou masque tout le reste du <details>.

Comment ouvrir un élément details par défaut ?

Ajoutez l'attribut booléen open : <details open>. Le navigateur ajoute et retire cet attribut au fil des ouvertures et fermetures, donc le CSS peut styliser details[open].

Comment faire un accordéon où une seule section est ouverte ?

Donnez à chaque <details> du groupe le même attribut name, par exemple name="faq". En ouvrir un ferme les autres du groupe, sans JavaScript.

Comment retirer ou changer la flèche d'un details summary ?

Définissez list-style: none sur summary et ajoutez summary::-webkit-details-marker { display: none; } pour Safari. Dessinez ensuite votre propre indicateur, par exemple avec summary::after, et changez-le avec details[open] summary::after.

Peut-on détecter l'ouverture d'un élément details ?

Oui. Écoutez l'événement toggle sur l'élément <details> et lisez sa propriété open. Définir details.open = true en JavaScript l'ouvre.

Concepts liés