Build a responsive, animated, accessible accordion that looks pretty good

Accordions are a pretty common thing that we find on websites these days, but they’re often… a little bit lacking, either with awkward animations, or a complete lack of animations, and sometimes just looking pretty ugly. I recently came across an awesome codepen by Zed Dash that looked fantastic, and I thought it would be the perfect starting place to creating a responsive, and importantly, very good looking accordion that could help add a little delight to a users experience with a site. 🔗 Links ✅ Zed Dash’s original codepen: https://codepen.io/z-/pen/OBPJKK ✅ The final code: https://github.com/kevin-powell/accordion ✅ ARIA authoring practices Accordion Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/ ✅ ARIA authoring practices Accordion Example: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/ ✅ Why details isn’t great for accordions (and many other things): https://adrianroselli.com/2019/04/details-summary-are-not-insert-control-here.html ✅ How to use heading levels properly: https://youtu.be/NexL5_Vdoq8 ✅ SVG Sprite creator: https://svgsprit.es ⌚ Timestamps 00:00 - Introduction 00:35 - The inspiration for what I’m going to build 01:17 - Building things out the right way 04:30 - The HTML 15:22 - The SVG icons 19:54 - The generic CSS stuff 21:38 - Setting up the panel styles 24:30 - Styling the icons 29:04 - Setting up the size of the panels and fixing up the button 39:43 - Dealing with the overflowing text 40:52 - The JavaScript - adding the interactions 50:11 - Adding the animations 52:30 - Fixing up the typography and text positioning 56:10 - Making the text more readable 57:49 - Adding prefers-reduced-motion 59:59 - Adding a background to the titles 1:06:42 - Making it responsive 1:12:27 - Improving the keyboard interactions 1:15:43 - Using containment #css -- Come hang out with other dev's in my Discord Community 💬 https://discord.gg/nTYCvrK Keep up to date with everything I'm up to ✉ https://www.kevinpowell.co/news