¿Cómo hago para que varias etiquetas de resumen se muestren correctamente dentro de una etiqueta de detalle?
Cada vez que lo intento, solo trata la primera etiqueta de resumen como un menú desplegable de acordeón y la segunda etiqueta de resumen como el contenido de la primera etiqueta de resumen.
Por ejemplo:
.level_one { padding-left: 10px; } .level_two { padding-left: 20px; } .content { padding-left: 30px; } <details> <summary class="level_one">Level One: Header</summary> <details> <summary class="level_two">Level Two: Header A</summary> <p class="content">Content for header A</p> <summary class="level_two">Level Two: Header B</summary> <p class="content">Content for header B</p> </details> </details>Sin embargo, no tiene sentido tener dos resúmenes ... Tal vez considere dividirlo como details diferentes
.level_one { padding-left: 10px; } .level_two { padding-left: 20px; } .content { padding-left: 30px; } <details> <summary class="level_one">Level One: Header</summary> <details> <summary class="level_two">Level Two: Header A</summary> <p class="content">Content for header A</p> </details> <details> <summary class="level_two">Level Two: Header B</summary> <p class="content">Content for header B</p> </details> </details>