HTML Academy · Leçon

Créer un accordéon PE

Créez un accordéon fonctionnel sans JavaScript, puis améliorez-le.

Créer un accordéon PE est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 4 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.

Objectif : un accordéon fonctionnel sans JS

La version PE d’un accordéon utilise uniquement HTML — la paire d’éléments natifs <details>/<summary>. Cliquez sur summary pour ouvrir ou fermer le panneau. Cela fonctionne sans CSS, sans JS et sans cadre logiciel : c’est intégré à HTML.

<details>
  <summary>What is HTML?</summary>
  <p>HTML is the markup language of the web.</p>
</details>

Accessibilité intégrée

<summary> est un bouton focalisable et activable au clavier (Entrée/Espace permet de basculer). Les lecteurs d’écran annoncent l’état développé ou réduit. Deux éléments HTML fournissent ce qu’un accordéon React personnalisé nécessiterait des dizaines de lignes d’ARIA et de gestion des événements pour réaliser.

Mise en couches avec CSS

Stylez le triangle de divulgation, les espacements internes du panneau et les transitions avec du CSS ordinaire. L’attribut open reflète l’état, donc details[open] summary { color: blue; } s’applique uniquement lorsque le panneau est développé. Aucun JS n’est nécessaire pour les finitions visuelles.

details { border-bottom: 1px solid #ccc; padding: 8px 0; }
summary { font-weight: bold; cursor: pointer; }
details[open] summary { color: var(--accent); }

Animer l’ouverture et la fermeture

L’ouverture et la fermeture par défaut sont instantanées. Animez-les en faisant transiter content-visibility, ou avec du JS qui mesure la hauteur du panneau et anime max-height. Pour les cas simples, le basculement brusque est acceptable ; l’animation est une amélioration CSS+JS appliquée progressivement.

Améliorer avec JavaScript

JS peut ajouter des fonctionnalités pratiques : fermer les autres accordéons lorsqu’un accordéon s’ouvre (mode d’ouverture unique), conserver l’état ouvert dans localStorage, animer la transition ou suivre dans les analyses les entrées qui sont développées. Chaque amélioration est entièrement additive.

document.querySelectorAll("details").forEach((d) => {
  d.addEventListener("toggle", () => {
    if (d.open) {
      document.querySelectorAll("details").forEach((o) => {
        if (o !== d) o.removeAttribute("open");
      });
    }
  });
});

L’événement de bascule

<details> déclenche un événement toggle chaque fois que son état ouvert change. Utilisez-le pour réagir à l’ouverture par l’utilisateur sans reconfigurer les gestionnaires de clic. Compatible avec les clics de souris comme avec l’activation au clavier.

Rendre l’état côté serveur

Pour afficher un accordéon initialement ouvert, définissez l’attribut open côté serveur : <details open>. L’état se trouve dans le HTML, ce qui le rend accessible aux robots d’indexation et aux utilisateurs disposant d’une connexion lente, avant même l’exécution du moindre JS.

Quand le composant intégré ne suffit pas

Si la conception exige une icône personnalisée d’ouverture et de fermeture, une révélation animée ou un panneau à plusieurs colonnes, créez une version personnalisée — mais utilisez si possible <details>/<summary> comme structure sous-jacente. N’ajoutez ARIA que si vous ne pouvez absolument pas utiliser les éléments natifs.

Vérification sans JS

Désactivez JavaScript dans DevTools et vérifiez que l’accordéon fonctionne toujours : cliquez sur summary, le panneau bascule, l’ordre de mise au point reste logique et le clavier permet l’activation. Si quelque chose ne fonctionne plus, le JS n’est pas une amélioration : c’est une exigence, ce qui enfreint PE.

Ouverture unique avec CSS uniquement

Pour obtenir le comportement « un seul élément ouvert à la fois » sans JS, utilisez l’attribut name sur <details> (pris en charge dans Chrome/Safari) : tous les éléments <details name="faq"> partagent leur état, de sorte que l’ouverture de l’un ferme les autres. Un modèle en HTML pur qui reproduit le fonctionnement des boutons radio.

Migrer un accordéon uniquement en JS

Remplacez les divs et le JS par <details>/<summary>, tout en conservant les classes CSS pour le style. Vous obtenez un HTML plus court, sans dépendance au JS, une meilleure accessibilité et un contenu indexable. La plupart des accordéons en JS peuvent être migrés vers PE avec un changement minimal visible pour l’utilisateur.

Vérification des connaissances

Quelle paire d’éléments HTML fournit un accordéon entièrement fonctionnel sans aucun JavaScript ?

Résumé

Un accordéon PE utilise les éléments natifs <details>/<summary> comme fonctionnalité de base : il est entièrement accessible et utilisable au clavier, sans JS. Ajoutez du CSS pour le style visuel et, facultativement, du JS pour les animations ou le comportement d’ouverture unique. Vérifiez en désactivant le JS que la fonctionnalité de base fonctionne toujours. Le nouvel attribut name permet même un mode d’ouverture unique avec CSS uniquement.

Questions Fréquemment Posées

La leçon « Créer un accordéon PE » est-elle gratuite ?

Oui — le texte complet de « Créer un accordéon PE » 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 « Créer un accordéon PE » ?

Créez un accordéon fonctionnel sans JavaScript, puis améliorez-le. 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 4 sur 4.

Combien de temps prend la leçon « Créer un accordéon PE » ?

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

← Retour à HTML Academy