Categories
Tips

HTML’s forgotten native accordion: styling the details/summary element

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.

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, 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.

Leave a Reply

Your email address will not be published. Required fields are marked *