Gosh bless the
<details> element. Toss some content inside it and you have an accessible expand-for-more interaction with just about zero work.
<summary> in there to customize what the expander text says.
Works great for FAQs.
There is really no limit to how you can style them. If you don’t like the default focus ring, you can remove that, but make sure to put some kind of styling back.
Here I’ve used a header element for each expandable section, which has a focus state that mimics other interactive elements on the page.
The only browser that doesn’t support this are the Microsoft ones (and Opera Mini which makes sense—it doesn’t really do interactive).
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Mobile / Tablet
But even then, it’s just like all the sections are opened, so it’s not a huge deal:
Wanna style that default triangle? Strangely enough, the standard way to do that is through the list-style properties. But Blink-based browsers haven’t caught up to that yet, so they have a proprietary way to do it. They can be combined though. Here’s an example of replacing it with an image:
Unfortunately, they don’t turn, and there is no way to animate the default triangle either. One idea might be to target the
:focus state and swap backgrounds:
But that seems to be limited to WebKit and Blink and, even then, the arrow will return once the item is out of focus even if the item is still expanded.
- Know that the
<summary>element wipes out any semantics of other elements inside it, so don’t think you can put a
<h3>or something inside there and screen readers will pick it up, because they won’t. Dave has more details.
- Adrian also has an article about how details/summary may not be a good replacement for a variety of interaction patterns.