0Pricing
HTML Academy · Leçon

`details` et `summary` : composant d’affichage

Créez des composants natifs à développer et à réduire sans JavaScript.

`details` et `summary` : composant d’affichage est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

Que sont details et summary ?

Les éléments <details> et <summary> créent un composant natif d’affichage conditionnel — un composant de déploiement et de réduction — sans aucun JavaScript :

<details>
  <summary>What is HTML?</summary>
  <p>HTML (HyperText Markup Language) is the standard markup language
     used to create web pages.</p>
</details>

Comment cela fonctionne

Comportement interactif :

  • Par défaut, seul <summary> est visible
  • Cliquer sur summary affiche ou masque le reste du contenu
  • Un triangle d’ouverture apparaît par défaut sur summary
  • Aucun JavaScript n’est nécessaire

L’attribut open

L’attribut open déploie par défaut l’élément details :

<details open>
  <summary>Installation instructions</summary>
  <ol>
    <li>Download the installer</li>
    <li>Run the installer</li>
    <li>Restart your computer</li>
  </ol>
</details>
<!-- open is a boolean attribute: presence = expanded -->
<!-- Remove it to start collapsed -->

Créer une FAQ

Les sections de FAQ constituent un cas d’utilisation idéal :

<h2>Frequently Asked Questions</h2>

<details>
  <summary>Is HTML5 a programming language?</summary>
  <p>No. HTML5 is a markup language that defines the structure and meaning
     of web content. Programming languages like JavaScript add logic and behavior.</p>
</details>

<details>
  <summary>Do I need to close void elements?</summary>
  <p>In HTML5, void elements like &lt;img&gt; and &lt;br&gt; do not require
     a closing slash. Both &lt;br&gt; and &lt;br /&gt; are valid.</p>
</details>

Mise en forme de details et summary

Personnalisez l’apparence :

details {
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
}

summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;   /* remove default triangle */
}

summary::before {
  content: '▶ ';      /* custom arrow */
}

details[open] > summary::before {
  content: '▼ ';      /* rotate when open */
}

Supprimer le triangle par défaut

Le triangle d’ouverture est appliqué avec list-style :

/* Remove the default arrow: */
summary {
  list-style: none;
}

/* Firefox: */
summary::-webkit-details-marker {
  display: none;
}

/* Then add a custom indicator: */
summary::after {
  content: '+';
  float: right;
}
details[open] summary::after {
  content: '−';
}

Événement toggle

Écoutez l’ouverture et la fermeture avec l’événement toggle :

const details = document.querySelector('details');

details.addEventListener('toggle', () => {
  if (details.open) {
    console.log('Details opened');
    // Track analytics, load content, etc.
  } else {
    console.log('Details closed');
  }
});

Accordéon avec details

Créez un accordéon simple : un seul panneau est ouvert à la fois :

/* Pure CSS accordion using details: */
/* Each item is a details element */
/* For exclusive open, use JavaScript: */

const allDetails = document.querySelectorAll('details');
allDetails.forEach(d => {
  d.addEventListener('toggle', () => {
    if (d.open) {
      allDetails.forEach(other => {
        if (other !== d) other.removeAttribute('open');
      });
    }
  });
});

Accessibilité de details et summary

Fonctionnalités d’accessibilité intégrées :

  • summary reçoit le focus du clavier et peut être activé avec Entrée ou Espace
  • Les lecteurs d’écran annoncent le texte de summary et l’état de déploiement
  • Le contenu masqué se trouve dans le DOM, mais est annoncé comme masqué jusqu’à son déploiement

Attribut name pour un accordéon exclusif

HTML 2025 ajoute name à details pour créer un accordéon exclusif natif :

<details name="faq">
  <summary>Question 1</summary>
  <p>Answer 1...</p>
</details>

<details name="faq">
  <summary>Question 2</summary>
  <p>Answer 2...</p>
</details>
<!-- details with the same name act as a group -->
<!-- Opening one closes the others automatically -->
<!-- Supported in Chrome 120+ and Firefox 130+ -->

Chargement différé du contenu avec toggle

Chargez le contenu uniquement lorsque details est ouvert :

<details id="advanced">
  <summary>Load advanced settings...</summary>
  <div id="advanced-content">Loading...</div>
</details>

<script>
const d = document.getElementById('advanced');
d.addEventListener('toggle', async () => {
  if (d.open) {
    const res = await fetch('/api/settings');
    const html = await res.text();
    document.getElementById('advanced-content').innerHTML = html;
    d.removeEventListener('toggle', arguments.callee);
  }
}, { once: true });
</script>

Vérification rapide

Quel élément fournit le texte déclencheur toujours visible dans un composant d’affichage conditionnel details ?

Récapitulatif : détails et synthèse

Éléments essentiels du composant de divulgation :

  • <details> + <summary> — développement et réduction natifs, sans JavaScript
  • Attribut open — développer par défaut
  • Événement de basculement — réagir à l’ouverture et à la fermeture
  • Mettre en forme avec CSS ; supprimer le triangle par défaut avec list-style: none
  • Attribut name — accordéon exclusif (Chrome 120 et versions ultérieures)

Questions Fréquemment Posées

La leçon « `details` et `summary` : composant d’affichage » est-elle gratuite ?

Oui — le texte complet de « `details` et `summary` : composant d’affichage » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « `details` et `summary` : composant d’affichage » ?

Créez des composants natifs à développer et à réduire sans JavaScript. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer HTML Academy ?

Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « `details` et `summary` : composant d’affichage » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?

Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. `aside` : contenu complémentaire
  2. `figure` et `figcaption` revisités
  3. `details` et `summary` : composant d’affichage
  4. Les éléments `progress` et `meter`
← Retour à HTML Academy