Das HTML <details> Tag

[Tommy Herrmann]

Das HTML <details> Tag dient dazu, einen Bereich innerhalb einer Seite, wie z.B. eines Textes <p> Tags </p>, zunächst zu verstecken. Man kann dann mittels Klick diesen Text aufklappen.

Hier ein Beispiel auf einer meiner Seiten mit Anleitung:

https://www.mobirise-tutorials.com/Test ... ml#details

Code: Alles auswählen

<details>
 <summary>Das Blindtextchen</summary>
 <p>Weit hinten, hinter den Wortbergen...</p>
</details>

Das zusätzliche Attribut "open" würde den Inhalt anfangs anzeigen, also dann so:

Code: Alles auswählen

<details open>
 <summary>Das Blindtextchen</summary>
 <p>Weit hinten, hinter den Wortbergen...</p>
</details>

Das <summary> Tag </summary> definiert dabei eine sichtbare Überschrift für das <details> Element, die dann auch automatisch klickbar ist.

Die Symbol-Pfeile werden mit diesem Tag automatisch dargestellt.

[Werner-Zenk.de]

Mit CSS können die Symbol-Pfeile farblich angepasst werden:

Code: Alles auswählen

summary::marker {
  color: Royalblue;
}

[Tommy Herrmann]

... ah - danke Dir

offensichtlich macht der Chrome (Edge) da anderes als z.B. der Firefox oder die mobilen Browser:

Code: Alles auswählen

details > summary {
  color: #6592e6;
  cursor: pointer;
  font-size: 1.5rem;
}
summary:hover {
  color: #4479d9;
}
details[open] summary ~ * {
  animation: sweep 0.8s ease-in-out;
}
@keyframes sweep {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
summary::marker {
  color: green;
}
details[open] summary::marker {
  color: red;
}

Beim Edge wird die Animation nur einmalig dargestellt, bei anderen Browsern jedes Mal.

[Werner-Zenk.de]

Dieser font-size: 24px; hat bei mir einen Fehler verursacht. Normalerweise ist das <summary> Tag ein Block-Element, auch wenn kein Text mehr dort steht, ist dieses Element auf der Zeile anklickbar.

Ich habe da noch einen cursor: pointer; hinzugefügt und eine maximale Breite von 150px;
Klar, dass dann bei einer größeren Schriftgröße der Text dann umgebrochen wird.

Mit opacity muss man aufpassen bei Chromium, das funktioniert nicht immer so wie gewünscht.

[Tommy Herrmann]

was für einen Fehler? Wie soll ich es sonst gestalten?

Ich habe das so gemacht, weil ich um das "details" Tag nicht noch ein "h" Tag setzen kann.

Ich muss jetzt los und kann erst morgen wieder antworten ...

[Werner-Zenk.de]

Alles gut , da ich die Zeilenbreite begrenzt hatte, ist ein Fehler bei der verwendeten Schriftgröße entstanden

[Tommy Herrmann]

Moin,

... ach so.

Habe die 24px mal in 1.5rem geändert.

Wozu begrenzt Du die Zeilenbreite? Dann geht doch genau der Effekt verloren, dass man die gesamte Zeile klicken kann.

[Werner-Zenk.de]

Bei einem Link kann man da auch nur im Bereich des A-Tags klicken, außer man fügt ein padding hinzu.
Mir ist es schon öfters passiert, dass ich versehentlich außerhalb geklickt habe und ungewollt damit die <details> geöffnet habe.
Deswegen auch, cursor: pointer; damit der Benutzer sieht, hier findet eine Interaktion statt.
Im Event-Kalender hatte ich diese Funktion immer mit einem (grauen) Hintergrund belegt, damit der Benutzer sieht, wie weit die Funktion anklickbar ist.

[Tommy Herrmann]

Ah - OK - ja, das macht Sinn.

Ich habe das jetzt auf meiner Seite noch so hinzugefügt:

Als Block-Element nimmt das <summary> Tag die gesamte, verfügbare Breite des Blocks ein und ist somit auch noch rechts neben dem Text klickbar. Gibt man also dem Block-Element noch ein zusätzliches Styling, so stellt es sich wie ein Akkordeon dar.

[Tommy Herrmann]

Als Akkordeon

Die Tatsache mit dem Block-Element hat mich auf die Idee gebracht, da mal ein Akkordeon draus zu entwickeln, diesmal eben nicht mit Bootstrap sondern mit genau diesem <details> Tag, einfach einige Mal übereinander gelegt

https://www.mobirise-tutorials.com/Test ... #Akkordeon

[Werner-Zenk.de]

Super, gefällt mir