Subscribe

HTML Detail Summary element

✍️

Make accordion like elements with no JavaScript!

5 Mar, 2021 · 2 min read

Today we will look at a native HTML element that can be used to create expandable elements.

It's the detail-summary combination, and the result will look like this.

See the Pen abBYLrr by Chris Bongers (@rebelchris) on CodePen.

HTML Detail summary

To add this functionality, we can enter a details element inside it with a summary which will act as the title; below that, a p will be the collapsable content.

It will look like this:

<details>
  <summary>How old is Dragonball Z?</summary>
  <p>
    Dragon Ball Z is adapted from the final 324 chapters of the manga series,
    which were published in Weekly Shōnen Jump from 1988 to 1995. It premiered
    in Japan on Fuji Television on April 26, 1989
  </p>
</details>

You can have multiple details on one page, and they are even styleable!

details {
  width: 200px;
  margin-bottom: 1rem;
  border: 1px solid #efefef;
  padding: 0.5rem;
}
summary {
  color: #333;
  font-weight: bold;
}

And that's it. We created a fantastic accordion-like element with no JavaScript involved!

Browser support

The cool part about the detail and summary combi is that it has good support! It's just IE not playing along.

HTML detail summary browser support

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Trying out native dialog modals

8 Aug, 2022 · 3 min read

Trying out native dialog modals

HTML fallback images on error

6 Aug, 2022 · 2 min read

HTML fallback images on error

Join 1828 devs and subscribe to my newsletter