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
<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
Like much of modern HTML and CSS,
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
<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