Das HTML <details> Tag

CSS und andere hilfreiche Anweisungen
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 2834
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Das HTML <details> Tag

Ungelesener Beitrag von 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.
Benutzeravatar
Werner-Zenk.de
Moderator
Moderator
Beiträge: 550
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Das HTML <details> Tag

Ungelesener Beitrag von Werner-Zenk.de »

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

Code: Alles auswählen

summary::marker {
  color: Royalblue;
}
Es grüßt euch,
Werner
https://werner-zenk.de - Webseiten erstellen, optimieren und aufpeppen

"Gib einem Menschen einen Fisch, und er wird für einen Tag satt.
Lehre ihn Fischen, und er wird ein Leben lang satt."
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 2834
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Das HTML <details> Tag

Ungelesener Beitrag von Tommy Herrmann »

... ah - danke Dir :tu:

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.
Benutzeravatar
Werner-Zenk.de
Moderator
Moderator
Beiträge: 550
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Das HTML <details> Tag

Ungelesener Beitrag von 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.
Es grüßt euch,
Werner
https://werner-zenk.de - Webseiten erstellen, optimieren und aufpeppen

"Gib einem Menschen einen Fisch, und er wird für einen Tag satt.
Lehre ihn Fischen, und er wird ein Leben lang satt."
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 2834
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Das HTML <details> Tag

Ungelesener Beitrag von 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 ...
Benutzeravatar
Werner-Zenk.de
Moderator
Moderator
Beiträge: 550
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Das HTML <details> Tag

Ungelesener Beitrag von Werner-Zenk.de »

Alles gut :freunde: , da ich die Zeilenbreite begrenzt hatte, ist ein Fehler bei der verwendeten Schriftgröße entstanden :bier:
Es grüßt euch,
Werner
https://werner-zenk.de - Webseiten erstellen, optimieren und aufpeppen

"Gib einem Menschen einen Fisch, und er wird für einen Tag satt.
Lehre ihn Fischen, und er wird ein Leben lang satt."
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 2834
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Das HTML <details> Tag

Ungelesener Beitrag von 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.
Benutzeravatar
Werner-Zenk.de
Moderator
Moderator
Beiträge: 550
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Das HTML <details> Tag

Ungelesener Beitrag von 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.
Es grüßt euch,
Werner
https://werner-zenk.de - Webseiten erstellen, optimieren und aufpeppen

"Gib einem Menschen einen Fisch, und er wird für einen Tag satt.
Lehre ihn Fischen, und er wird ein Leben lang satt."
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 2834
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Das HTML <details> Tag

Ungelesener Beitrag von Tommy Herrmann »

Ah - OK - ja, das macht Sinn.

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

Mobirise-Tutorials hat geschrieben:
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.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 2834
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Das HTML <details> Tag

Ungelesener Beitrag von 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
Benutzeravatar
Werner-Zenk.de
Moderator
Moderator
Beiträge: 550
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Das HTML <details> Tag

Ungelesener Beitrag von Werner-Zenk.de »

:tu: Super, gefällt mir
Es grüßt euch,
Werner
https://werner-zenk.de - Webseiten erstellen, optimieren und aufpeppen

"Gib einem Menschen einen Fisch, und er wird für einen Tag satt.
Lehre ihn Fischen, und er wird ein Leben lang satt."
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 0 Gäste