Sommaire

Afficher des détails

Lorsque vous disposez de peu de place dans une page web, il peut être intéressant de n’afficher une information que si le visiteur le souhaite. Pour cela, nous utilisons l’élément <details> qui est le conteneur général. L’élément <summary> contiendra le texte sur lequel les visiteurs devront cliquer pour afficher les détails. C’est dans l’élément <summary> que vous placez tous les éléments que vous souhaitez voir afficher.

Voici un exemple simple :

<!DOCTYPE HTML> 
<html> 
<head> 
   <meta charset="utf-8"> 
   <title>Détails et sommaire</title> 
</head> 
<body> 
   <details> 
       <summary>Affichez les informations détaillées</summary> 
           <p>Morbi leo risus, porta ac consectetur...</p> 
           <p><img src="gutenberg.jpg" alt="Gutenberg" /> 
           </p> 
   </details> 
</body> 
</html>

Voici l’affichage obtenu au chargement de la page. Le texte à cliquer est précédé par un triangle basculant. Mais c’est bien toute la ligne de texte qui est interactive. 

images/C09-001.png

Voici l’affichage ...