Formatierung bei verschachtelten Listen zum Aufklappen (Wiki-Artikel „Akkordeon mit details“)

[Anja]

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