Comment créer plusieurs divisions pliables en CSS pur sans code étendu ?

Divs pliables en CSS pur : minimiser le code pour plusieurs éléments

Question :

En CSS pur, comment pouvez-vous créer plusieurs éléments div pliables sans écrire de code détaillé pour chaque élément ?

Contexte :

Le code fourni utilise la pseudoclasse :target pour réduire et développer un seul div. Cependant, la nécessité de créer de nombreux éléments div similaires nécessite une grande quantité de CSS.

Solution :

Une approche alternative consiste à utiliser la méthode

<code class="html"><details>
  <summary>This is what you want to show before expanding</summary>
  <p>This is where you put the details that are shown once expanded</p>
</details></code>