HTML: details, summary (collapsible box)

By Xah Lee. Date: .

Collapsible box

details

A toggle to show/hide more info.

summary
  • Used inside details tag.
  • The content of summary element is shown when the details toggle is closed.

Example

click to expand.

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice “without pictures or conversation?”.

<details>

<summary>click to expand.</summary>

<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice “without pictures or conversation?”.</p>

</details>

Example. collapsible nested list.

food
  • pizza
  • hamburger
  • fruit
    • apple
    • banana
  • veggie
    • spinach
    • mushroom
<details open>
 <summary>food</summary>
 <ul>
  <li>pizza</li>
  <li>hamburger</li>
  <li>
   <details>
    <summary>fruit</summary>
    <ul>
     <li>apple</li>
     <li>banana</li>
    </ul>
   </details>
  </li>
  <li>
   <details>
    <summary>veggie</summary>
    <ul>
     <li>spinach</li>
     <li>mushroom</li>
    </ul>
   </details>
  </li>
 </ul>
</details>

Browser support

supported by all major browsers since January 2020.