Boxen

Definitionsbox

<div class="def">
...
</div>

Weitere Boxen

Box für Zitate

<div class="zitat">
    Mehr als die Vergangenheit interessiert mich die Zukunft, denn in ihr gedenke ich zu leben.
    <div class="autor">
    Albert Einstein <span class="quelleneintrag" lizenzcode="zitat" title="Poeteus Zitate Albert Einsteins" autor="Albert Einstein" original="http://www.poeteus.de/zitat/Mehr-als-die-Vergangenheit-interessiert-mich-die-Zukunft-denn-in-ihr-gedenke-ich-zu-leben/8" letzterzugriff="24.11.2023"></span>
    </div>
</div>

Boxen aufklappen

Alle Klasen für Boxen können aufklappbar gemacht werden. Dazu nutzen wir die HTML-Tags <details></details> und <summary></summary>.

<details class="information">
  <summary>Aufklappbutton</summary>
  <p>Inhalt der eigentlichen Box.</p>
</details>

Es entsteht die folgende Ansicht:

Werden mehrere Boxen hintereinander im Quelltext entdeckt, die zudem die gleiche CSS-Klasse haben, dann entfällt bei den weiteren Boxen die Markierung (hier der gelbe Kreis mit dem i). Außerdem wird der Abstand zwischen den Boxen entfernt.

<details class="frage">
  <summary>Aufklappbutton 1</summary>
  <p>Inhalt der eigentlichen Box.</p>
</details>
<details class="frage">
  <summary>Aufklappbutton 2</summary>
  <p>Inhalt der eigentlichen Box.</p>
</details>
<details class="frage">
  <summary>Aufklappbutton 3</summary>
  <p>Inhalt der eigentlichen Box.</p>
</details>

Es entsteht die folgende Ansicht:

Boxen lassen sich außerdem auch schachteln:

<details class="def">
    <summary>Aufklappbutton 1</summary>
    <p>Inhalt der eigentlichen Box.</p>
    <details class="def">
        <summary>Aufklappbutton 2</summary>
        <p>Inhalt der eigentlichen Box.</p>
        <details class="def">
            <summary>Aufklappbutton 3</summary>
            <p>Inhalt der eigentlichen Box.</p>
        </details>
    </details>
</details>

Damit lassen sich zum Beispiel mehrere Tipps in Stufen realisieren.

In beiden Fällen (untereinander und geschachtelt) werden nur gleiche Boxen zusammengefasst:

sowie