Web Accessibility - <details> element

<details> element at MDN Web Docs

Browser support for <details> element

Recently I was asked to add an element that when selected opens a box below it which provides additional information about the element above it. A simple way to do this is to use the <details> element. The <select> element has a similar functionality, but it is meant to represent a selection of options. In this case it was about two paragraphs with text and a link.

Yes, you could use a pre-made template, or build it yourself from <div>s and JavaScript, but the <details> element serves exactly this purpose and comes already included. It's also a great alternative if you want to build an accordion element yourself, as you can completely change the look and feel. The structure of the element is simple and easy to understand:

<details>
  <summary>Details</summary>
  Content of this element.
</details>

Other advantages are that it is well supported in all browsers (except Internet Explorer), it is keyboard focusable and offers screen reader support. Here you can find an example of a heavily modified <details> element:

Details and Summary Elements Demo