A Web Component for transforming headings into an accordion
Yesterday, I shared how you can use the <details> and <summary> elements to create an accordion component (or a collection of disclosure components).
Over on my YouTube channel this week, I built an HTML Web Component that converts a collection of headings and content into an accordion.
This one uses the pattern documented in the ARIA Authoring Practices Guide (APG), and adds the required roles, attributes, and listeners.
You can download the source code on GitHub.
And if you like stuff like this, keep an eye out for Kelp UI, my new front-end library for people who love HTML, powered by modern CSS and web components.