How to Create an Accordion with Vanilla JavaScript

Hi, My name is Andy Leverenz and I work as a Product Designer at Dribbble. For fun I design, code, and write. Check out my blog called Web-Crunch https://web-crunch.com where I publish design and development tutorials with the occasional vlog.

====================

I'm back at it with my Let's Build: With JavaScript series. This week I take a stab at creating a custom accordion component with vanilla JavaScript.

An accordion is a useful component for dealing with a lot of extra content that doesn't necessarily always need to display. You might use an accordion to call out specific features of an application, show and hide content that isn't always important but is indeed useful to your given web design. I have even seen an entire F.A.Q. section built successfuly with accordions.

Much like the instrument an accordion shows and had panels when a given panel is active. In this video tutorial I'll teach you a vanilla JavaScript way of creating a simple accordion. Since we are spending some time crafting the interactions with JavaScript, I also wanted to make the accordion look good as well.

For this I reach for Tailwind CSS. Tailwind is a utility-driven CSS framework, useful for coding designs in a more scalable and resusable fashion. Sure, you can use custom styles or other frameworks just the same but they are rather opinionated approaches in some cases.

====================

💻 Previously published at: https://web-crunch.com/how-to-create-accordion-vanilla-javascript/

💻 Check out the blog: https://web-crunch.com

🦄 Check out my personal site: https://justalever.com

🚀 Links: Weekly Newsletter: https://web-crunch.com/subscribe Twitter: https://twitter.com/webcrunchblog Twitter(Personal Account): https://twitter.com/justalever Facebook: https://facebook.com/webcrunchblog Dribbble: https://dribbble.com/justalever Github: https://github.com/justalever Medium: https://medium.com/the-web-crunch-publication

📘Check out my book on UX Design: "LUXD: Learn User Experience Design" https://web-crunch.com/books/luxd

📙 Check out my FREE book on Tumblr Theming: "Pro Tumblr Theming" https://web-crunch.com/books/ptt

💯 Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease: http://bit.ly/webcrunchhosting

🌊 Need more advanced hosting for Rails, PHP, Node, or other projects? Digital Ocean has you covered. https://m.do.co/c/ee243ee15648

💎 Ruby on Rails devs, Try HatchBox.io. You'll save upwards of 50% compared to Heroku. I use it and love it! https://hatchbox.io/?via=andy

☕️ 🙏🏻 Patreon https://www.patreon.com/webcrunch

☕️ Or buy me a coffee https://www.buymeacoffee.com/webcrunch ... https://www.youtube.com/watch?v=dTNBRS8ZS4U