The Details and Summary Elements

The details and summary were recently introduced with HTML 5.1 and allow you to create a block toggled opened or closed and that provides more information.

The summary should be nested inside the details element and provides a title for the expendable element. Here’s how to use it:

  <summary>Explaining all of the things</summary>
  <p>Some explanation goes here...</p>
Explaining all of the things

Some explanation goes here...


Here how you could style the details element:

details {
  background: hsla(153, 48%, 49%, .1);
  padding: 1em;
  border: 1px solid hsla(162, 76%, 32%, .3);
  color: hsl(162, 76%, 32%);
  border-radius: 5px;

details > p {
  background: white;
  padding: 0.5em 0.7em;
  border-radius: 5px;
  box-shadow: 1px 1px 3px hsla(162, 76%, 32%, .2);
  font-size: 1em;
  margin-top: 1em;
Explaining all of the things

Some explanation goes here...

Some more explanation...

You can also have the details pane expanded by default with the use of the open attribute:

<details open>
  <summary>Price Breakdown</summary>
   <dt>Item 1:</dt> <dd>$4</dd>
   <dt>Item 2:</dt> <dd>$12</dd>
   <dt>Item 3:</dt> <dd>$32</dd>
Price Breakdown
Item 1:
Item 2:
Item 3:

Browser Support

Can I Use details? Data on support for the details feature across the major browsers from

✖ Clear

πŸ•΅ Search Results

πŸ”Ž Searching...