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.

<tr> Tabellenzeile

CSS - Wertigkeiten verändern mit der !important-Regel

PHP - Einfache Bannerrotation

JavaScript - CountDown (2)

MySQL - Bilder in einer Datenbank-Tabelle speichern und ausgeben

Rechtsklick verboten!
Einen Rechtsklick mit der Maustaste zu verbieten, zum Beispiel mit Javascript, ist nicht originell, sondern dumm. Mit dem Rechtsklick kann man das Kontextmenü anzeigen lassen, und die Homepage zu den Favoriten hinzufügen, oder die Seite ausdrucken. Den Quelltext kann man nicht mit Javascript schützen, denn es gibt viele Wege und Mittel, um an diesen zu gelangen. Sollte man sensible Daten ins Internet stellen?