Wie erstelle ich zusammenklappbare Divs mit HTML5 „' und „'?

„So erstellen Sie zusammenklappbare Divs mit HTML und CSS“

Zusammenklappbare Divs werden häufig verwendet, um dynamische und organisierte Inhalte auf einer Webseite darzustellen . Typischerweise enthalten diese Divs einen Header und einen versteckten Textkörper, der bei Benutzerinteraktion erweitert und reduziert werden kann. Das Erstellen zusammenklappbarer Divs ausschließlich mit CSS kann praktisch sein, insbesondere um eine saubere und unkomplizierte Codebasis aufrechtzuerhalten.

Die :target-Pseudoklasse

Frühere Ansätze für zusammenklappbare CSS-Divs waren beteiligt Verwendung der Pseudoklasse :target, die Stile aktiviert, wenn ein bestimmtes Element durch ein Zielattribut verknüpft ist (z. B. ). Diese Technik erfordert jedoch erhebliche Wiederholungen für mehrere reduzierbare Elemente, was zu einem aufgeblähten CSS-Code führt.

Der HTML5-Code

<code class="html"><details>
  <summary>This is the collapsible header</summary>
  <div class="content">This is the collapsible body</div>
</details></code>