nicht angemeldet
Formatierung bei verschachtelten Listen zum Aufklappen (Wiki-Artikel „Akkordeon mit details“)
Gunnar Bittersmann
Rolf B
Matthias ScharwiesFormatierung bei verschachtelten Listen zum Aufklappen (Wiki-Artikel „Akkordeon mit details“)
Hallo,
ich habe eine Frage zu verschachtelten Aufklapplisten mit <details>. Vielleicht kann ja jemand helfen.
Ich nutze den Formatierungsvorschlag aus dem Beitrag "Akkordeon mit details" zum Formatieren des Aufklappzeichens in ein sich drehendes '+'.
Soweit so gut.
Nun möchte ich auch verschachtelte Listen anlegen und scheitere an der Vererbung der Transformationseigenschaften.
Das Ziel: Level 1 '+' (blau) wird beim Aufklappen rot und dreht sich 45° Level 2 '+' sollte dann grün sein und beim Aufklappen schwarz werden und sich ebenfalls 45° drehen.
Mein Ergebnis: Level 1 '+' verhält sich wie gewünscht. Level 2 '+' ist sofort schwarz, nicht gedreht und verändert sich nicht beim Anklicken.
Kann mir jemand einen Tipp geben, wo mein Fehler liegt?
Meine Liste sieht so aus:
<details>
<summary><h2>Aufklappen Level 1</h2></summary>
<ul>
<li>Level 1 Item 1</li>
<li>
<details>
<summary class="second">Level 1 Item 2 = Aufklappen Level 2</summary>
<ul>
<li>Level 2 Item 1</li>
<li>Level 2 Item 2</li>
<li>Level 2 Item 3</li>
<li>
<details>
<summary class="second">Level 2 Item 4 = Aufklappen Level 3</summary>
<ul>
<li>Level 3 Item 1</li>
<li>Level 3 Item 2</li>
</ul>
</details>
</li>
<li>Level 2 Item 4</li>
</ul>
</details>
</li>
<li>Level 1 Item 3</li>
<li>Level 1 Item 4</li>
</ul>
</details>
Das CSS dazu:
/****** LISTEN AUFKLAPPEN *******/
summary {
position: relative;
}
summary::marker, summary::-webkit-details-marker {
color: transparent;
}
summary::after {
content: "+";
position: absolute;
color: blue;
font-size: 2em;
font-weight: bold;
left: 0em;
top: 0em;
transition: all 0.5s;
}
details[open] summary::after {
color: red;
transform: translate(5px,0) rotate(45deg);
}
summary.second {
position: relative;
}
summary.second::marker, summary.second::-webkit-details-marker {
color: transparent;
}
summary.second::after {
content: "+";
position: relative;
color: green;
font-size: 1em;
font-weight: bold;
right: 1em;
top: 0em;
transition: all 0.5s;
}
details[open] summary.second::after {
color: black;
transform: translate(5px,0) rotate(45deg);
}
Vielen Dank schon mal! Anja
-
@@Anja
ich habe eine Frage zu verschachtelten Aufklapplisten mit <details>. […] Kann mir jemand einen Tipp geben, wo mein Fehler liegt?
In der Verwendung des
details-Elements. Die Spec ist da eindeutig: “tab widgets and menu widgets are not disclosure widgets, so abusing thedetailselement to implement these patterns is incorrect.” Auf gut Deutsch:detailsfür Menüs ist falsch.Ein Online-Beispiel von dir wäre gut, sodass man sich dein Problem ansehen kann. Dafür ist das Feld „problematische Seite“ da, nicht für Verlinkungen ins Wiki, wo dein Problem nicht auftritt. (Dass manche Seiten im Wiki problematisch sind, soll hier nicht das Thema sein. 😈) Es soll nicht jeder deinen Code in eine Plattform wie CodePen oder Dabblet kopieren müssen; das wäre deine Aufgabe.
Ohne das zu tun, hab ich da so eine Vermutung:
details[open] summary.second::after {Der Selektor wirkt auf alle
summary.second-Elemente, die Nachfahren (egal der wievielten Generation) einesdetails[open]-Elements sind. Du möchtest aber nur die erste Generation, d.h. Kinder?Kwakoni Yiquan
--
Ad astra per aspera-
Hallo Gunnar,
ich hab's auch nicht in ein Fiddle übernommen, aber ist eine aufklappbare Liste ein Menü oder Tab Control?
Was mich stört, ist das h2 im Summary - das ist kein phrasing content, den das summary Element aber enthalten möchte.
Das sollte ein <summary class="first">...</summary> sein, mit entsprechender Schriftformatierung statt einem h2 darin.
Was ich nicht verstehe, ist, wie die Darstellung sein SOLL. Auf Level 1 ist das + links, auf Level 2 rechts. Absicht?
Rolf
--
sumpsi - posui - obstruxi-
Hallo Gunnar, hallo Rolf,
vielen Dank erstmal für die Antworten. Und Entschuldigung für die Fehler in der Benutzung des Forums, es ist mein erster Versuch. 🙃
Um das potentielle Nutzungsszenario aufzuzeigen, unter "problematische Seite" ein Link. Ist das so richtig? Ziel ist es, diese und andere verschachtelte Linklisten nachzubauen.
Ich habe jetzt verstanden, dass ich die oberste Ebene als <summary class="first">...</summary> formatieren sollte, ohne die <h2>-Tags. Kein Problem.
Und den (bzw. einen) Fehler habe ich auch gefunden. Der Trick war, die mit class="first" etc. definierte Transformationseigeschaft nicht nur am <summary> zu definieren, sondern auch am <details>. Jetzt machen die Verschachtelungen, was sie sollen. 😀
Falls es von Interesse ist: Mein Code angepasst:
<details class="first"> <summary class="first">Aufklappen Level 1</summary> <ul> <li>Level 1 Item 1</li> <li> <details class="second"> <summary class="second">Level 1 Item 2 = Aufklappen Level 2</summary> <ul> <li>Level 2 Item 1</li> <li>Level 2 Item 2</li> <li>Level 2 Item 3</li> <li> <details class="third"> <summary class="third">Level 2 Item 4 = Aufklappen Level 3</summary> <ul> <li>Level 3 Item 1</li> <li>Level 3 Item 2</li> </ul> </details> </li> <li>Level 2 Item 4</li> </ul> </details> </li> <li>Level 1 Item 3</li> <li>Level 1 Item 4</li> </ul> </details>und
/****** LISTEN AUFKLAPPEN *******/ summary.first { position: relative; } summary.first::marker, summary.first::-webkit-details-marker { color: transparent; } summary.first::after { content: "+"; position: absolute; color: blue; font-size: 2em; font-weight: bold; left: 0em; top: -1em; transition: all 0.5s; } details.first[open] summary.first::after { color: red; transform: translate(5px,0) rotate(45deg); } summary.second { position: relative; } summary.second::marker, summary.second::-webkit-details-marker { color: transparent; } summary.second::after { content: "+"; position: absolute; color: blue; font-size: 2em; font-weight: bold; left: 0em; top: -1em; transition: all 0.5s; } details.second[open] summary.second::after { color: green; transform: translate(5px,0) rotate(45deg); } summary.third { position: relative; } summary.third::marker, summary.third::-webkit-details-marker { color: transparent; } summary.third::after { content: "+"; position: absolute; color: blue; font-size: 2em; font-weight: bold; left: 0em; top: -1em; transition: all 0.5s; } details.third[open] summary.third::after { color: orange; transform: translate(5px,0) rotate(45deg); }
Nochmal danke für den Input! Anja
-
Guten Morgen,
Um das potentielle Nutzungsszenario aufzuzeigen, unter "problematische Seite" ein Link. Ist das so richtig?
Das mit der „problematischen Seite“ schien anfangs logisch, bei unserer "Frage-im-Forum"-Funktion aus dem Wiki heraus nicht mehr so. Da überlegen wir noch, wie man das besser machen kann.
Ziel ist es, diese und andere verschachtelte Linklisten nachzubauen.
https://haab.weimar-klassik.de/Bibliographie_HAAB/klass.html
Ah, ok!
Das Kästchen mit dem Plus, bzw. Minus scheint mir intuitiv; allerdings würde ich Links blau (und unterstrichen) darstellen und die summary-Elemente eben in normaler Textfarbe.
Ich habe jetzt verstanden, dass ich die oberste Ebene als <summary class="first">...</summary> formatieren sollte, ohne die <h2>-Tags. Kein Problem.
Genau. Es ist ja „nur“ eine - wenn auch verschachtelte - Liste ohne Kapitel.
Und den (bzw. einen) Fehler habe ich auch gefunden. Der Trick war, die mit class="first" etc. definierte Transformationseigeschaft nicht nur am <summary> zu definieren, sondern auch am <details>. Jetzt machen die Verschachtelungen, was sie sollen. 😀
Das könntest du anstelle der Klassen auch mit dem Kindselektor
E > Fhinkriegen:Mir erschließt sich allerdings nicht, warum man alle Aufklapp-Elemente nach ihrer Position in der Hierarchie kennzeichnen muss. Das ist im Original ja auch nicht so.
Herzliche Grüße
Matthias Scharwies
--
Die Signatur findet sich auf der Rückseite des Beitrags.
-
-
-
-
Hallo Anja,
ich möchte Dich gerne auf einen Artikel von Heydon Pickering verweisen: „Collapsible Sections“:
https://inclusive-components.design/collapsible-sections/
Leider englisch, und leider keine geschachtelten Sektionen. Aber dort wird intensiv die Bedienbarkeit einer solchen Liste diskutiert. Er verwendet nicht <details>, sondern implementiert die Ausklappfunktion selbst.
@Gunnar Bittersmann: Was meinst Du, warum Heydon auf <details> verzichtet hat? Fand er es unpassend für die Aufgabe, oder lag es an der Kompatibilität? Der Artikel ist von 2017, laut caniuse.com fehlte <details> da „nur“ im Edge-Browser, der bekam es erst 2020 mit der Umstellung auf Chromium. Im Firefox kam es 2016.
Mit <details>, Heydons Idee eines SVG-Elements für den Expand-Marker und einer Rotation beim Aufklappen könnte es so aussehen:
https://jsfiddle.net/Rolf_b/mLb8dyoq/
Rolf
--
sumpsi - posui - obstruxi-
Servus!
@Gunnar Bittersmann: Was meinst Du, warum Heydon auf <details> verzichtet hat? Fand er es unpassend für die Aufgabe, oder lag es an der Kompatibilität? Der Artikel ist von 2017, laut caniuse.com fehlte <details> da „nur“ im Edge-Browser, der bekam es erst 2020 mit der Umstellung auf Chromium. Im Firefox kam es 2016.
Ich hab' ihn auf Mastodon mal angetröötet.
Mit <details>, Heydons Idee eines SVG-Elements für den Expand-Marker und einer Rotation beim Aufklappen könnte es so aussehen:
Cool!
Herzliche Grüße
Matthias Scharwies
--
Die Signatur findet sich auf der Rückseite des Beitrags.-
Servus!
Servus!
@Gunnar Bittersmann: Was meinst Du, warum Heydon auf <details> verzichtet hat? Fand er es unpassend für die Aufgabe, oder lag es an der Kompatibilität? Der Artikel ist von 2017, laut caniuse.com fehlte <details> da „nur“ im Edge-Browser, der bekam es erst 2020 mit der Umstellung auf Chromium. Im Firefox kam es 2016.
Ich hab' ihn auf Mastodon mal angetröötet.
@heydon
https://inclusive-components.design/collapsible-sections/
This was 2017. Would you use details/summary today?
@selfhtml Yeah, some of the time. But you can't put headings in summary, so that restricts utility.
Herzliche Grüße
Matthias Scharwies
--
Da steh' ich nun, ich armer Tor,
Und bin so klug als wie zuvor!
Heiße Magister, heiße Doktor gar,
Und ziehe schon an die zehen Jahr'
Herauf, herab und quer und krumm
Meine Schüler an der Nase herum –
...-
Hallo Matthias Scharwies,
okay, aber für eine geschachtelte Liste sind <h_>-Elemente ja auch nicht zwingend.
Was ich spaßig finde: Heydon meint, man könnte nicht in ein <use> hineinmanipulieren. Gut, dass ich das nicht gewusst habe. Bzw. gut, dass ich gelesen habe, dass custom properties in das Shadow-DOM des use-Elements hineinvererbt werden. Dadurch kann ich das + zum x drehen und sogar wild animieren 😜
Rolf
--
sumpsi - posui - obstruxi-
Servus!
Hallo Matthias Scharwies,
okay, aber für eine geschachtelte Liste sind <h_>-Elemente ja auch nicht zwingend.
Nee, aber das scheinen ja alle (auch ursprünglich Anja) haben wollen.
Was ich spaßig finde: Heydon meint, man könnte nicht in ein <use> hineinmanipulieren.
Stümmt: SVG/Tutorials/Gruppierungen#use_im_Shadow-DOM
Gut, dass ich das nicht gewusst habe. Bzw. gut, dass ich gelesen habe, dass custom properties in das Shadow-DOM des use-Elements hineinvererbt werden.
wird im folgenden Absatz erklärt! 😀
Dadurch kann ich das + zum x drehen und sogar wild animieren 😜
Perfekt! Kommt das Bsp ins Wiki? bitte, bitte!
Herzliche Grüße
Matthias Scharwies
--
BTW: War eben auf Discord und bin jetzt enttäuscht nach oben! Läuft gar kein Fußball mehr?-
Hallo Matthias Scharwies,
Kommt das Bsp ins Wiki? bitte, bitte!
Bloß wo? Auf die Akkordeon-Seite passt das nicht, generell unter die Infoboxen auch nicht.
Rolf
--
sumpsi - posui - obstruxi-
Servus!
Hallo Matthias Scharwies,
Kommt das Bsp ins Wiki? bitte, bitte!
Bloß wo? Auf die Akkordeon-Seite passt das nicht, generell unter die Infoboxen auch nicht.
nicht ins erste Kapitel, da geht's nur um Grundlagen
Evtl. in 2 oder 4 - oder als eigenes Kapitel.
Herzliche Grüße
Matthias Scharwies
--
Die Signatur findet sich auf der Rückseite des Beitrags.
-
-
-
-
-
-
Hallo Rolf,
ich möchte Dich gerne auf einen Artikel von Heydon Pickering verweisen: „Collapsible Sections“:
Danke für den Tipp - schau ich mir mal an.
Mit <details>, Heydons Idee eines SVG-Elements für den Expand-Marker und einer Rotation beim Aufklappen könnte es so aussehen:
Spannend! SVG ist mir auch neu - es ist aber auch gut 10 Jahre oder länger her, dass ich mal ausführlicher was mit Webseiten ohne voreingestelltes CMS gemacht habe... 😆 Wird Zeit, dass ich mich mal wieder intensiver mit dem Thema beschäftige.
Wie gut, dass es dazu hier dieses Wiki, Forum und so nette Unterstützung gibt!
Anja
-
