HTML: details, summary (collapsible box)

By Xah Lee. Date: . Last updated: .

Collapsible box

details

A toggle to show/hide more info.

summary
  • Used inside details tag.
  • Clicking the details element will show/hide the summary.

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.