June 14, 2020

Styling the details/summary element

Update: It’s probably a good idea to follow this if you’re implementing FAQs: https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html

As frontend developers or designers, many times we’re required to design or implement accordion-style components. While there are plenty of libraries out there, the easiest way to accomplish the same results without adding bloat is to use the <details> HTML element.

The HTML Details Element (<details>) creates a disclosure widget in which information is visible only when the widget is toggled into an “open” state. A summary or label can be provided using the <summary> element.

<details> on MDN

Out of the box, the details element looks pretty decent, but not really appealing:


Styled details


Further styling

Here’s another version, very similar to what I had to implement for a client:

See the Pen details styled by Nacho Toledo (@iign) on CodePen.12319

Notice how you can also change the default disclosure widget (the little arrow/triangle), by using the list-style property or the ::-webkit-details-marker pseudo-element selector for Chrome based browsers.

In this case, I’m removing the disclosure widget altogether and using a pseudo-element to display a chevron. I also added a subtle animation to flip it on expand/collapse.

A note on Firefox vs Webkit

On Webkit-based browsers you can declare summary::-webkit-details-marker { display: none; } to hide the marker. However, on Firefox you need this declaration summary { list-style-type: none; }

LocalWP styled FAQs

I came across this beautiful and subtle implementation on the pricing page of the Flywheel site. Interestingly, they’re actually using <dl> and <dt> tags instead of a <detail>, which would seem semantically more correct. Also, looking at their HTML I see they refer to it as an accordion item (<dl class="accordion">).

See the Pen details reveal widgets — Flywheel style by Nacho Toledo (@iign) on CodePen.12319

Other stuff and behaviour

Of course, you could add some JavaScript on top of this to collapse other elements on click, to make it behave more like a traditional accordion. However, I think that’s often not necessary or even expected from the user’s point of view.

Useful links