HTML Details/Summary

02-05-2019

Making a dropdown can be tricky. Here's an easy, albeit not fully supported, way of making a html dropdown:

<details>
 <summary>Dropdown</summary>
 <div>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque impedit in
  consectetur facere recusandae iure voluptatem quas nostrum, harum quasi qui
  magni, adipisci, obcaecati esse nisi itaque doloribus ab ullam.
 </div>
</details>

Result:

You can force the dropdown state open like so: <details open>...</details>

Interestingly, you can even manipulate the dropdown triangle indicator with css. Here's an example:

details summary::-webkit-details-marker {
 display: none;
}
details summary:after {
 content: "+";
}
details[open] summary:after {
 content: "-";
}

The trick is to overwrite the default styles with ::-webkit-details-marker{} and then again display the change in state with details[open].

Here's a full example:

See the Pen HTML Details/Summary by Tristan White (@triss90) on CodePen.

This awesome feature, does suffer from a lack of support in some key browsers though.

The details element generates a simple no-JavaScript widget to show/hide element contents, optionally by clicking on its child summary element.