בנה אקורדיון רספונסיבי, מונפש ונגיש שנראה די טוב

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/e...
✅ Why details isn’t great for accordions (and many other things): https://adrianroselli.com/2019/04/details-summary-ar...
✅ 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/newsletter

Come hang out with me live every Monday on Twitch!
📺 https://www.twitch.tv/kevinpowellcss

---

Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awe...
💖 Support me on Patreon: https://www.patreon.com/kevinpowell

---

My editor: VS Code - https://code.visualstudio.com/

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!