Tabs are ideal for singular page web apps or websites with multiple subjects to display. In this tutorial, we shall create a simple web application with a horizontal switchable tabs panel. The web application can do the following:
- Show the active tab.
- Switch between the tabs.
- Display the contents of each tab.
We will define the structure of the web application using HTML. Then render the elements on the screen using CSS and finally, add the functionality using some bit of Vanilla JavaScript. That's right, no fancy JavaScript framework is needed, just the simple Vanilla JavaScript we all know. Let's begin!
Prerequisites
Before getting into the coding part of this project, ensure you have the following:
- Intermediate level knowledge in HTML, CSS & JavaScript.
- Text editor or a codepen account.
Step 1: Setting up the HTML
Essentially the HTML has a few levels of elements:
- The wrapper of the tabbed panel.
- The sidebar
- The tab contents
- The actual tab buttons.
Begin by constructing the tab panel wrapper. Create a div, give it a class, and call it tabs; this will be the wrapper for the tab panel. Create a new div inside the wrapper, give it a class, and title it sidebar; this will contain the tab buttons. Create three buttons in the sidebar, then give each one the tab-btn class. To the first button, add a tab-btn-active class. The active class will come in handy when specifying in the CSS and JavaScript what happens to the tab when the tab button is clicked. Add HTML, CSS, and JavaScript as the names of the buttons, respectively. Add a data for-tab=' ' attribute to each of these buttons now. Add a tab number to the data element to specify which button corresponds to which tab. Tab 1, tab 2, and tab 3 are examples. In the JavaSript, the tab number is used to read the properties and select which tab to open.
Create a parent div underneath the sidebar and give it the class content to act as a wrapper for the tab contents. Create a new div and give it the tab-content class. Also, give the tab content div a class called tab-content-active. The active class will be used in CSS and JavaScript to indicate what happens to the tab when the tab button is clicked.
We'll map the data-for-tab attribute within this div, so add a data-tab='1' property to it and give it a tab number of 1 to represent the first tab. You may now go ahead and fill the div with some content. Do the same for tab two and three, but remove the tab-content-active class and name their data-tab attribute 2 and three respectively. Finally, add some bit of content.
If you're loading the page from the server, you might want to utilize loops or export the data so that the data-tab values for tabs 1, 2, and 3 matches the data-for-tab values. Make sure the data-for-tab and data-tab numbers match if you're not using any server-side code.
Step 2: Styling the page
We will first style the tab wrapper. Apply the following styles to the tab wrapper:
Thereafter apply the following styles to the sidebar and tab buttons:
Afterwards, specify what will happen to the button once it gets clicked; that will be the tab-btn-active class. When the button is clicked, it will apply the following styles to the button element:
The following styles will be applied to the content, tab-content and tab-content classes:
The position absolute applied in the tab-content class will stack the content the all the tabs. After that, display none the contents of all the tabs.
A display block style is applied to the tab-content-active class so as to display the content in the default tab, which is the first tab.
Step 3: Add JavaScript
Part 1:
To begin the coding, create a method called setupTabs. Then pick all the components with the tab-btn class with a querySelectorAll. When the button is clicked, utilize the forEach method on it to fire a clickeventListener or a function. The content of the selected tab will be displayed using the button function.
Part 2:
Define the following constants to represent the tabs wrapper, sidebar, tab number and tab content to activate:
const sidebar = button.parentElement will start at the button, then go to the parent element, the sidebar. const tabs = sidebar.parentElement selects the parent element of the sidebar, which is the tab wrapper. const tabNumber = button.dataset.forTab, the dataset refers to any attributes that start with a data- attribute. The JavaScript will convert the snake-case format of the dataset into camel-case. The forTab refers to the value in the data-for-tab attribute. Now to get the actual tab content to activate, we use the const tabActivate =tabs.querySelector() then inside the querySelector we pass .tab-content[data-tab="${tabNumber}"] to select the tab content element with data-tab equals to the number gotten after clicking the tab.
Part 3:
Add a DOMContetntLoaded eventListener and call the setupTabs function once the DOM content has been loaded.
Part 4:
First, you will set all the buttons to be inactive, then set the active button. You will do the same for the tab content. Select all the buttons and for each button, remove the tab-btn-active class, in doing this it will reset and no button will have an active state, then set the clicked button to have the tab-btn-active class.
After that, select all the tab contents and for each tab, remove the tab-content-active class, in doing this it will reset and no tab will have an active state, then set the active tab to have the tab-content-active class.
Now simply add the tab-btn-active class so that whenever the button is clicked, it becomes active. We will do the same for the tab content, using the tabActivate constant add the tab-content-active class.
And that's it!
Conclusion!
The purpose of this tutorial was to give you the most detailed instructions on how to make a horizontal switchable tabs panel using HTML, CSS, and JavaScript. I hope this tutorial guided you through the process of creating a horizontal switchable tab panel. To reach a larger audience, please like or share the article. In the comments section, feel free to make a comment or ask a question.
Top comments (0)