skip to content

HTML Details/Summary


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:

Dropdown
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.

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.