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> on MDN
<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
Out of the box, the details element looks pretty decent, but not really appealing:
Here’s another version I had to implement for a client:
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.
Flywheel styled FAQs
I came across this beautiful and subtle implementation on the pricing page of the Flywheel site. Interestingly, they’re actually using
<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 (