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

zu verwenden. und HTML-Tags, die speziell für diese Funktionalität entwickelt wurden.

Details:

• : Enthält den Text, der vor dem Erweitern der Details angezeigt wird.
• : Schließt den detaillierten Inhalt ein, der zunächst ausgeblendet ist.

Durch die Verschachtelung dieser Tags können Sie ganz einfach erweiterbare Abschnitte ohne CSS erstellen:

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

Browser-Unterstützung:

Die Browser-Unterstützung variiert. Webkit (z. B. Safari, Chrome) bietet die besten Ergebnisse. In anderen Browsern werden die Details möglicherweise immer angezeigt.

Fallback:

Wenn

und Tags werden nicht unterstützt. Erwägen Sie die Verwendung der Methode zum Ausblenden/Anzeigen mit umfangreichen CSS-Selektoren.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mehrere zusammenklappbare Divs in reinem CSS ohne umfangreichen Code?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!