Comment faire des blocs qui se déplient en HTML ?

Réponses rédigées par Antoine

Dernière mise à jour : 2022-06-17 11:38:56

Question

Comment faire des blocs qui se déplient en HTML, de telle manière que lorsqu'on clique sur un titre, le texte correspondant apparaisse ?

Réponse

Pour créer des blocs qui se déplient, en HTML, vous pouvez utiliser les balises <details> et <summary>.

L'avantage de ces deux balises HTML c'est qu'aucun code supplémentaire n'est nécessaire, vous n'avez pas besoin de JavaScript.

Vous pouvez en outre utiliser quelques propriétés CSS pour personnaliser l'affichage comme dans l'exemple ci-dessous.

Vous noterez l'argument open dans la première balise HTML <details open> : il permet de spécifier que ce bloc est par défaut ouvert.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment faire des blocs qui se déplient en HTML ?</title>
<style>
summary {
 color: white;
 background-color: grey;
 padding: 10px;
 margin-bottom: 20px;
 cursor: pointer;
}
</style>
</head>  
<body>
<details open>
 <summary>Bloc 01</summary>
 <p>Contenu 01</p>
</details>
<details>
 <summary>Bloc 02</summary>
 <p>Contenu 02</p>
</details>
<details>
 <summary>Bloc 03</summary>
 <p>Contenu 03</p>
</details>
</body>
</html>

Vous trouverez une démonstration de ce script, qui permet de plier et déplier des blocs HTML, dans le Bac à codes.