Is it possible to include more than one summary elements inside of a detail element in HTML5?

user_10261200 0
Viewed 69

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>

summary frontend css html javascript
1 Answers

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>

user_29300380
Related