HTML’s forgotten native accordion

As frontend developers or designers, many times we’re requierd 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:

12319

Styled details

12319

Further styling

Here’s another version 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.

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.

Flywheel 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

Useful links