Wie erstelle ich mehrere zusammenklappbare Divs in reinem CSS ohne umfangreichen Code?

Reine CSS Collapsible Divs: Code für mehrere Elemente minimieren

Frage:

Wie können Sie in reinem CSS erstellen? mehrere reduzierbare div-Elemente, ohne für jedes Element umfangreichen Code zu schreiben?

Kontext:

Der bereitgestellte Code verwendet die :target-Pseudoklasse, um ein einzelnes div zu reduzieren und zu erweitern. Die Notwendigkeit, zahlreiche ähnliche div-Elemente zu erstellen, erfordert jedoch eine große Menge an CSS.

Lösung:

Ein alternativer Ansatz besteht darin, die Funktion

<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>