Creating a Simple Horizontal Switchable Tabs Panel Using HTML, CSS & JavaScript.
Published: 2021-06-08 08:04:31



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.

[![1.png](https://i.postimg.cc/8zNq0StT/1.png)](https://postimg.cc/hfZyXNkY)

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:

[![2.png](https://i.postimg.cc/nct5Xx8q/2.png)](https://postimg.cc/JtPKF9zh)

Thereafter apply the following styles to the sidebar and tab buttons:

[![3.png](https://i.postimg.cc/QdfnYWFq/3.png)](https://postimg.cc/hX7rfvbJ)

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:

[![4.png](https://i.postimg.cc/wMzVj6tv/4.png)](https://postimg.cc/478t8RQk)

The following styles will be applied to the content, tab-content and tab-content classes:

[![5.png](https://i.postimg.cc/VkhWb9S2/5.png)](https://postimg.cc/214ZsZ7x)

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.`

[![6.png](https://i.postimg.cc/KjmPyJV3/6.png)](https://postimg.cc/N9P967QQ)

### Part 2:

Define the following constants to represent the tabs wrapper, sidebar, tab number and tab content to activate:

[![7.png](https://i.postimg.cc/L6CzrkVh/7.png)](https://postimg.cc/GHD8DyV1)

`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.

[![8.png](https://i.postimg.cc/L5y1FRLG/8.png)](https://postimg.cc/y3Zd0MfT)

### 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.

[![9.png](https://i.postimg.cc/Vv3zCV8d/9.png)](https://postimg.cc/tnN00D7j)

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.

[![10.png](https://i.postimg.cc/Gmj9WbRK/10.png)](https://postimg.cc/18f96hfV)

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.

[![11.png](https://i.postimg.cc/LsC5svnZ/11.png)](https://postimg.cc/B8F4YT5q)

And that's it!

{% codepen https://codepen.io/brian-dot-hub/pen/eYvrzGr %}



## 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.