Présenter des informations repliables avec details et summary

Une réponse pratique ne doit pas obliger les visiteurs à parcourir un long bloc de texte pour trouver une information simple. Vous pouvez la rendre repliable sans fabriquer un bouton et gérer vous-même son état en JavaScript : HTML fournit déjà details et summary. Vous allez les utiliser pour les informations pratiques de l’événement de l’association.

Créer un bloc repliable

details est un élément interactif qui contient une partie visible en permanence et une partie que la personne peut afficher ou masquer. Le premier élément enfant summary fournit l’intitulé actionnable du bloc ; placez-y une formulation brève qui annonce précisément l’information cachée. Dans le projet, « Informations pratiques » annonce ainsi l’adresse du lieu de rendez-vous.

<details class="culture-details">
  <summary>Informations pratiques</summary>
  <p>Rendez-vous à la Maison des associations, 10 rue des Arts, Lyon.</p>
</details>

À l’état initial, l’intitulé « Informations pratiques » est affiché et le paragraphe de l’adresse est replié. En activant l’intitulé, le navigateur révèle le paragraphe ; une nouvelle activation le replie. Le contenu reste dans l’ordre du document, sous l’annonce de l’événement et après sa date et sa description.

Vérifier le comportement au clavier

Le navigateur fournit l’interaction de base : le résumé peut recevoir le focus et être activé au clavier, notamment avec Entrée ou Espace. Une fois le bloc ouvert, le paragraphe révélé est du contenu ordinaire ; il ne devient pas un arrêt de tabulation supplémentaire. Pour vérifier le résultat, parcourez la page avec Tab, repérez l’indicateur de focus sur le résumé, puis activez-le et contrôlez que le texte apparaît. Cette vérification complète le parcours clavier abordé dans les leçons précédentes.

Choisir l’état initial

Si une information doit être visible dès l’arrivée sur la page, vous pouvez placer l’attribut booléen open sur details. Sa présence signifie que le bloc est initialement déployé ; sa valeur écrite n’est pas nécessaire. Pour l’adresse de l’événement, qui est utile mais secondaire par rapport au titre et à la date, conservez ici l’état fermé par défaut.

<details class="culture-details" open>
  <summary>Informations pratiques</summary>
  <p>Rendez-vous à la Maison des associations, 10 rue des Arts, Lyon.</p>
</details>

Le bloc est ouvert au chargement de la page. La personne peut ensuite le replier ou le déployer.

N’utilisez pas open uniquement pour attirer l’attention : réservez cet état aux informations dont l’affichage immédiat est réellement utile. Gardez l’intitulé dans summary et le contenu associé à l’intérieur de details. Dans la page fil rouge, conservez la classe autorisée culture-details et n’ajoutez ni classe ni règle de style nouvelle ; les styles du projet restent dans style.css.

À retenir

• details contient l’intitulé et le contenu repliable.
• summary présente une consigne courte et précise et sert de contrôle natif.
• L’activation au clavier et l’affichage du contenu sont gérés sans script de bascule.
• Ajoutez open seulement si le contenu doit être visible dès le chargement.

Dans la prochaine leçon, vous apprendrez à choisir un contrôle natif selon l’action attendue, plutôt que d’imiter son comportement avec des éléments génériques.