Formation PUB060 : HTML, 2020 Les liens et accordéons

2.2 <details> et <summary> pour ouvrir/refermer une section


Il est loin le temps où il fallait installer une bibliothèque pour ajouter des liens de type accordéon, c'est-à-dire des sections qui peuvent être ouvertes et refermées en cliquant sur le titre.

Les fonctionnalités requises sont désormais incluses directement dans le HTML grâce aux balises <details> et <summary>.

Entre les balises <details> et </details>, on inscrit le titre entouré de <summary> et </summary>, suivi du texte qui peut être caché ou non.

HTML

<details>
    <summary>Cliquez pour développer</summary>
    Voici les détails...
</details>

Un triangle sera affiché devant le texte et il changera de position selon que les la section est ouverte ou refermée.

Voici le résultat du code précédent (certains élément visuels sont dus à la feuille de style de ce site Web ;-)) :

Cliquez pour développer Voici les détails...

 

▼Publicité

Veuillez noter que le contenu de cette fiche vous est partagé à titre gracieux, au meilleur de mes connaissances et sans aucune garantie.
Merci de partager !

Site fièrement hébergé chez A2 Hosting.

Soumettre