HTML - Element: <summary> - Offenlegungs-Vorrichtung

Der <summary>-Tag (HTML 5) (summary = Zusammenfassung) definiert eine sichtbare Überschrift für den <details>-Tag. Die Überschrift kann angeklickt werden, um Details anzuzeigen oder auszublenden.

<!DOCTYPE html>
<html>
<head>
 <title>Details anzeigen oder ausblenden</title>
</head>
<body>

<h1>Details anzeigen oder ausblenden</h1>

<details>
<summary>Das Blindtextchen</summary>
<p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. 
Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans.</p>
</details>

</body>
</html>

Beispiel anzeigen

Attribute

Mit dem Attribut open wird die Zusammenfassung geöffnet angezeigt:

<details open>
<summary>Das Blindtextchen</summary>
<p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. 
Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans.</p>
</details>

Tipps

• Pfeil-Symbol mit CSS anpassen:

Fruits

Peaches

Apples

Plums

<style>
summary.beispiel::marker {
 color: Red;
 font-size: 1.5em;
}
</style>

<details>
<summary class="beispiel">Fruits</summary>
<p>Peaches</p>
<p>Apples</p>
<p>Plums</p>
</details>

• Pfeil-Symbol als Bild ändern:

Fruitcake tiramisu sesame Fruitcake tiramisu sesame snaps toffee apple pie pastry caramels brownie.
Tiramisu icing topping Tiramisu icing topping ice cream cupcake toffee fruitcake marzipan. 
<style>
details.detail>summary:first-of-type {
 display: list-item;
 counter-increment: list-item 0;
 list-style: inside disclosure-closed;
 list-style-position: inside;
 list-style-image: url("bild.gif");
}
</style>

<details class="detail">
<summary>Fruitcake tiramisu sesame</summary>
Fruitcake tiramisu sesame snaps toffee apple pie pastry caramels brownie.
</details>

<details class="detail">
<summary>Tiramisu icing topping</summary>
Tiramisu icing topping ice cream cupcake toffee fruitcake marzipan.
</details>
Fruitcake tiramisu sesame Fruitcake tiramisu sesame snaps toffee apple pie pastry caramels brownie.
Tiramisu icing topping Tiramisu icing topping ice cream cupcake toffee fruitcake marzipan. 
<style>
details.detail2>summary:first-of-type {
 display: list-item;
 counter-increment: list-item 0;
 list-style: inside disclosure-closed;
 list-style-position: inside;
 list-style-type: "\1F44D";
}
</style>

<details class="detail2">
<summary>Fruitcake tiramisu sesame</summary>
Fruitcake tiramisu sesame snaps toffee apple pie pastry caramels brownie.
</details>

<details class="detail2">
<summary>Tiramisu icing topping</summary>
Tiramisu icing topping ice cream cupcake toffee fruitcake marzipan.
</details>

• Mit der Angabe: summary {width: fit-content;} in CSS, ist nur der Bereich um den Text anklickbar.

• JavaScript - HTML-Details automatisch schließen

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<option> Option - Auswahlliste/Datenliste

CSS - Animierte Box mit Keyframes

PHP - Die ersten X-Wörter eines Satzes ausgeben

JavaScript - Eine Gruppe von Bildern markieren

MySQL - Spalte einer Tabelle sortieren