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 🔗

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

🔗 Other Links Links 🔗

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

📹 Related/Mentioned Videos 📹

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

⏲️ 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 🌐

[CodinginPublic]

Already had a great suggestion over on GitHub! I never changed the animated arrow on the onePanelOnly option for closed panels. You can add the following code in that section:
this.buttons.forEach((btn) => {
btn.setAttribute('aria-expanded', 'false');
});

[_vikramhegde_]

Really loved the community-improvements idea, might as well try to contribute myself. And as always awesome tutorial.

[ikai]

Nice tutorial. I'm curious why you added the styling using insertAdjacentHTML rather doing that in the css file?

[vvnn]

can you tutorial about node-sass as gulp

[paulehrig]

To never get a duplicate id in the constructor use: this.id = Date.now(); instead of the Math.random() ... function. Thanks for your fantastic videos!