Das HTML <details> Tag

CSS und andere hilfreiche Anweisungen
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5706
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
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
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;
}
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5706
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
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
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.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5706
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
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
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:
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5706
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
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
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.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5706
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: 5706
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
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
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
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5706
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Das HTML <details> Tag

Ungelesener Beitrag von Tommy Herrmann »

Bei meinem Buch-Logo, im obersten Tab des Akkordeons, habe ich noch ein Hover bei Mausüber eingebaut, um das Logo animiert zu vergrößern.

Hier mit dieser class="grow"

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

Code: Alles auswählen

.grow {
  transition: all 0.5s ease-in-out;
}
.grow:hover {
  transform: scale(1.3);
}

... vielleicht kann das mal jemand gebrauchen.
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Das HTML <details> Tag

Ungelesener Beitrag von Werner-Zenk.de »

Moin Tommy,

bei bestimmten Browser-Fenstergrößen wird das Logo nicht vollständig angezeigt.
Muss man da unterhalb (des Logos) etwas mehr padding / margin hinzufügen oder ist das ein generelles Problem bei Bootstrap und den Media-Querys? Das ist mir schon des Öfteren bei diversen Seiten aufgefallen :confused:

fenstergroesse.png

Oder ist das die Erklärung dafür:
Das details-Element ist in allen modernen Browsern verfügbar. Das Öffnen selbst kann leider nicht mit CSS animiert werden. Deshalb wird die Höhe des div-Containers animiert.
Hierbei benötigt man aber einen festen Wert, der bei einer Veränderung des Inhalts angepasst werden muss.

Solche festen Werte sollten nach Möglichkeit vermieden werden!
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5706
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Das HTML <details> Tag

Ungelesener Beitrag von Tommy Herrmann »

Moin Werner,

nee - das ist nicht Bootstrap - dat is Tommy :D

Ich habe da noch etwas mehr Platz gegeben (Cache erneuern) - da ist ja sowieso ganz normale CSS.

Komischerweise ist das bei mir nicht so. Bei mir ist der Abstand nach unten immer richtig, egal bei welchem Browser und auch am Handy :confused:

... und ja - das kann gut durch diese fest vorgegebene Höhe passieren, warum das jetzt von der Bildschirmauflösung abhängen könnte, vermag ich gerade nicht zu sagen.


Akkordeon.jpg


P.S.:

ich denke es lag an einer falschen Bild-Größe. Ich hatte nur in der CSS angegeben:

max-width: 100px

Jetzt habe ich dem Bild auch eine feste Größe gegeben:

Code: Alles auswählen

<img src="https://www.mobirise-tutorials.com/Testseiten/Testseite-Blank/images/logo-mobirise-tutorials.png" width="100" height="auto" alt="Μobirise-Tutorials" title="Mobirise-Tutorials.com" class="center grow">
Guckst Du bitte dann nochmals bei Dir - danke :)
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Das HTML <details> Tag

Ungelesener Beitrag von Werner-Zenk.de »

Funktioniert jetzt Top :tu:
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5706
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Das HTML <details> Tag

Ungelesener Beitrag von Tommy Herrmann »

Danke :tu:

... bin gerade beim Rasen mähen :rasen:
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Das HTML <details> Tag

Ungelesener Beitrag von Werner-Zenk.de »

Treffen sich zwei Schafe,
sagt das eine Schaf zum anderen "Mäh"!
Sagt das andere "Mäh doch selber" ;)
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast