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

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