How do I make multiple summary tags display correctly inside of a detail tag?
Whenever I try, it only treats the first summary tag as an accordion dropdown and the second summary tag as the content of the first summary tag.
For Instance:
.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>It's kind of doesn't make sense have two summaries though...Perhaps consider split it as different details
.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>