Historically, many different technologies have been used to create accordion menus and “show more” interfaces on web pages. HTML tosses its hat into the ring with the details and <summary> elements. At their simplest, the new tags look something like this:

<details id="det-container">
    <summary>Mainframe</summary>
    <a href="#">Park</a>
    <a href="#">Hosts</a>
    <a href="#">Storylines</a>
    <a href="#">Recalls</a>
</details>

By default, only the immediate <summary> content is displayed on the page, with the rest of the information hidden. A browser that supports both elements should produce a UI widget beside the <summary> element; activating the interface will reveal the entire content. That activation will also set an open attribute on the <details> element.

Like much of modern HTML and CSS, <details> potentially replaces big chunks of traditional JavaScript or JQuery. There’s just one browser that doesn’t support the element at this time (Microsoft Edge) although coding support for it isn’t too challenging.

Different appearance and CSS in browsers

Inevitably new elements are rendered slightly differently in browsers; only time and familiarity breeds a standard look and feel. Right now, Chrome places a strong outline around summary text in an expanded detail element. It is recommended that this outline not be removed: it’s there for accessibility.

Warnings From The Validator

The W3C validator will currently flag the use of <details> in your code. That doesn’t mean that the code won’t work or that it’s wrong, just that the W3C is suggesting that you show caution when using the element in production.

Next, I’ll show you how to wire in compatibility with browsers that don’t yet support <details> and <summary>, and how to customize their appearance.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/rrpGXm