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>
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.
<meta> Meta-Angaben
CSS - Wertigkeiten verändern mit der !important-Regel
PHP - Dateigröße ermitteln und Maßeinheit anzeigen