HTML element and usage: Details disclosure

You might have seen it, I’ve used this element on top of the pages for some time now*. The details disclosure element is quite a nifty new (read: not fully supported) element. It has a wide variety of uses, for example a tooltip like implementation or FAQ.

– In my opinion – however, there is a slight flaw in de default implementation when you look at it from an end user perspective. It doesn’t auto-close upon clicking somewhere else then in the summary. Adding this isn’t that hard but you still need to add JavaScript to do so, thus adding unnecessary complexity. I might come back at improving user interaction of this element another time.

For now a few examples.

Example 1

<details>
  <summary> The summary or title </summary>
  <p>
    Initially hidden content...
  </p>
</details>

Demo 1 (without styles):

Example 2

<details open>
  <summary> The summary or title </summary>
  <p>
    Added the open attribute to show this content initially...
  </p>
</details>

Demo 2 (without styles):

* I Didn’t add polyfill for older browsers. If not working correctly please try to use a more modern browser. This is my playground, not intended to support everything fully.