How to Create Tabs 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.

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

Welcome to the next installment of my Let's Build: With JavaScript series. In this video, I'll be walking you through how to create a simple and dynamic tab component. using a combination of HTML, SCSS, and JavaScript.

Source Code: ⚙️ https://codepen.io/webcrunchblog/pen/YOZQXP

The focus of these series of videos will be on using vanilla JavaScript to start. I'll strive to not reach for frameworks until absolutely necessary.

Tabs are a useful feature for displaying more content on a page that you would rather not display in block or inline fashion using traditional CSS. Making the tab component as dynamic as possible in this video was a focus for the sake of adding new tabs and tab content further down the line.

The main function will be checking what tabs are active and not active. If they are active we will use an event listener when the user click to determined with tab and it's respective content to display.

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

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

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

🔭 Check out my app: https://affinicasts.com

💡 👫 Check out my agency: https://coupleofcreatives.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=rSEgjpMZXIc