Pour créer des blocs qui se déplient, en HTML, vous pouvez utiliser les balises <details> et <summary> de la manière suivante :
<!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.
