Creating a Tab component with HTML, CSS, and Javascript
What you'll learn
- How to use flexbox to create the basic layout
- How to use padding to make your components neater
- DOM Manipulation
Prerequisites
- Basic HTML, CSS, and Javascript
React verison coming soon!
The Code
* If the component preview isn't loading, try refreshing the page.
* You can adjust the size of the code preview and code by draging the sides!
Explanation
HTML
- With our HTML, we will create a tab container to hold our tab buttons, and three tab info containers to hold our quick blurb about different cities in Texas.
- Each of our info container will have the class 'tab-info', with houston having the selected class as default. Therefore, our button will have the selected class as default as well. Each container will also have an id labled with the corresponding city, this will help us in our JS.
CSS
- First, we will reset the margin and padding to our entire document and reset our button styles. We will also set everything to box-sizing: border-box, we will explain this in a bit.
- For each button, we add a hover effect and a selected class with the same color, a darker gray. With our container for our buttons, we give some padding, a border, and a width of 500px. We also make it a flex container to space things out a bit more neatly.
- For our tab-info containers, we add a bit of padding and a border, and also set the width to 500px. Remember when we set box-sizing to border box? We did this so our document only uses the content within a container to determine width and height. Without this property, it would use padding in this calculation as well, no extra math for us!(Try removing box-sizing: border-box and see what happens).
- Finally, we have a 'hide' class for our tab-info containers to use in our JS
Javascript
- Our JS is a bit more complicated than our other modules, but we got this, let's go through it line by line!
- We will first cycle through all of our buttons found in the tab-cont using the forEach method. For each button, we will add an event listener and do the following when the button is clicked.
- Within our click listener, we will go through all the buttons again and remove any buttons with the selected class. This is to ensure nothing stays selected when we click a different tab.
- Next, on the button we clicked, we will add the class 'selected'. We will then create two variables to help us show the correct information. The first variable will get the innerHTML of our button and assign its value to tabID. We can then use this variable to select the correct tab-info container to display on the screen, which will be within tabInfo.
- Now, like we did with the buttons, we cycle through all the tab-info containers and hide all of them.
- Finally, if our tabInfo container contains a value, we will remove the hidden class from that container and display it on the screen.
- Congrats! That's a lot to take in so don't worry if you don't get the logic. Go line by line and understand what's going on.