The Details and Summary HTML 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:

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

Styling

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;
}

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

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

Browser Support

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