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> 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<summary>element.
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.