[Go Make Things] A Web Component for transforming headings into an accordion

By rahmat hidayat

Saturday, June 7, 2025

​ 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. Like this? A Go Make Things membership is the best way to support my work and help me create more free content. Cheers, Chris ​ Want to share this with others or read it later? View it in a browser.​ ​

Did someone forward this to you? Get Daily Developer Tips.

Don't want to get these emails? Totally cool. Update your subscriber preferences.

You can also unsubscribe from all emails from me, including updates to products you've purchased.

113 Cherry St #92768, Seattle, WA 98104-2205

Share :

Facebook Twitter Google+ Lintasme