June 22, 2019
Recently I heard about Julian.com and specifically about the design of the manuals the owner, Julian Shapiro writes.
One of the things that he includes are little expander buttons (see the
- below) that will expand to information if you opt-in.
I love that. Julian provides the information that he deems minimally sufficient to understand the topic and then allows readers to opt into other information that may be relevant to them.
Digging into his particular implementation, it appears that he’s using a
<span> tag with a click handler to manage this transition.
As I noted in Buttons Without Style, putting a click handler on a
<div> is not ideal for accessibility. So, while I love the effect, I was wondering if there was a more accessible way to handle the implementation.
Other options of course include styling a
<button>, but in my research, I stumbled upon an HTML tag I’d never used before: the
The default may not be as stylish as Julian’s
<div> but it’s semantic HTML, which makes it attractive to me. The API has three basic parts and the MDN article notes several opportunities with regards to styling that I’ll be experimenting with in the near future. ¹
The three main features of the API are:
Wrap what you want to expand in a Details tags
Even include code blocks
The implementation is relatively straightforward - requiring only a few lines of HTML. Below is how I implemented it.
<details> <summary> Click Me To See More </summary> <h1>How To Expand Your Content</h1> <p>Wrap what you want to expand in a Details tags</p> <code> Even includ code blocks</code> </details>
It’s worth noting that the
<details> tag is not supported in Internet Explorer or Edge.
Thanks for reading! My name's Stephen Weiss. I live in Chicago with my wife, Kate, and dog, Finn.
Click here to see the archives of my weeks in review and sign up yourself!