This is a feature test and polyfill for the HTML5
summary markup pattern, with a couple of extras:
- Allows you to expand and collapse the
detailscontent above/below specified screen sizes
- Adds keyboard navigation and toggling
- Adds a bunch of ARIA goodness
open attribute to default
details to open/closed works as expected, naturally. To have an element only open above/below a certain size, each
details element accepts a
data-media attribute with a good ol’ fashioned media query in it.
I’ve included a shim for
matchMedia, both of which are required for the breakpoint behavior.
details isn’t natively supported, the
summary elements will simply behave like headings and all the content will be available.
Updates to come, and here is a demo.