HTML: Ausklappelemente mit dem Details-Tag

Der Details-Tag erlaubt schnell und einfach Ausklappelemente in Webseiten zu erstellen.

Ausklappelemente für Detailinformationen lassen sich in HTML schnell und einfach mit dem “detail” Tag erstellen. Klickt der Anwender auf das Element, wird es aufgeklappt und der Inhalt wird sichtbar.

Möglich und einfach umsetzbar macht dies der folgende Code:

<details style="background: #cccccc; border: 1px solid #000; margin-bottom: 1.5rem;">
    <summary style="padding: 1rem; background: #222222; color: #fff; cursor: pointer;">
        Ich bin die Überschrift. Klick mich an!
    </summary>
    <div style="padding: 1rem 1rem 1px 1rem;">
        <p>Hier kommt Inhalt, der erst nach dem Ausklappen sichtbar ist.</p>
        <img src="https://ekiwi.de/wp-content/uploads/2018/03/logo_blog_header-2.png">
    </div>
</details>

Der Code ist fast selbsterklärend. Das Element wird vom “detail”-Tag umschlossen. Die “summary” enthält die Überschrift und das “div”-Element enthält den Inhalt, welcher nach dem Aufklappen sichtbar ist.

Hier geht es zum Beispiel

Bestseller Nr. 1
Bestseller Nr. 2

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert