Custom FAQ Accordion Component with HTML, CSS, and JavaScript

Building an accordion component with accessibility in mind requires a lot of aria attributes, keyboard events, and more. While you can quickly get a functional accordion up and running, making it truly full-featured requires some more careful planning.

In this video, I'll show you how to create custom accordion with HTML, CSS, and vanilla JavaScript. As you watch and code along, think about how you might do things differently and then leave a comment or make a pull request on the Community Improvements branch to build out something better together in public.

🔗 Key Links 🔗
Live example: codinginpublic.dev/projects/accordion-component/
GitHub: github.com/coding-in-public/accessible-accordion-c…

---------------------------------------

🔗 Other Links Links 🔗
Catamaran Font: fonts.google.com/specimen/Catamaran
Shadow Generator: www.joshwcomeau.com/shadow-palette/
Tabler Icons: tablericons.com/

---------------------------------------

📹 Related/Mentioned Videos 📹
Clamp video:    • Dynamic Font Size CSS with clamp()  

---------------------------------------

⏲️ Timestamps ⏲️
0:00 Introduction
1:48 HTML
5:36 CSS for the page
11:22 CSS for the accordion
20:12 JS: Creating the Class constructor
24:50 JS: Adding metadata to buttons and panels
34:06 JS: Adding click event listeners
39:53 JS: Adding keyboard event listeners
43:32 JS: Functionality for options object
47:52: Conclusion

---------------------------------------

🌐 Connect With Me 🌐
Website: www.codinginpublic.dev/
Blog: www.chrispennington.blog/
Twitter: twitter.com/cpenned