Tab control component with Vanilla Js

Hi, in this post I’m going to show you how to create a “Tab control component” using Vanilla Javascript.

This is the enunciate:

Create a generic tab control component that loads in data asynchronously using vanilla JS.

The number and content of the tabs is dynamic.

Code:

<html>
    <head>
        <title>Tab Component By Cristina Rojas</title>
        <link rel = "stylesheet"
        type = "text/css"
        href = "styles.css" />
    </head>
    <body>
        <h1>Tab Component By Cristina Rojas</h1>
        <section id="container" class="container">
            <section id="subContainer" class="subContainer">
                <section id="tabContainer" class="tabContainer"></section> 
            </section>
        </section>
        <script src="tab.js"></script>
    </body>
</html>

h1 {
    color: #3a86ff;
}
.container {
    width: 800px;
    height: 600px;
}

.subContainer  {
    width: 100%;
    height: 100%;
    background-color: #fb5607;
    display: flex;
    flex-direction: column;
}

.tabContainer {
    display: flex;
    flex-direction: row;
}

.tab {
    height: 75px;
    width: 150px;
    text-transform: capitalize;
}

.activeTab {
    background-color: #ff006e;
    color: white;
    text-align: center;
}

.tab:hover {
    color: #ffbe0b;
    cursor: pointer;
}

.inactiveTab {
    height: 75px;
    width: 150px;
    background-color: #8338ec9e;
    color: white;
    text-align: center;
    border-right: 1px solid #8338ec;
}

.inactiveTab:hover {
    color: #ffbe0b;
    cursor: pointer;
}

.content {
    height: 100%;
    width: 100%;
    background-color: #ff006e;
    color: white;
    align-items: center;
    justify-content: center;
    display: flex;
}

p {
    font-size: 38px;
}

// Getting the base elements that are already in the HTML DOM
const containerElement = document.getElementById('container');
const tabContainerElement = document.getElementById('tabContainer');
const subContainer = document.getElementById('subContainer');

// Creating the content element
const contentContainer = document.createElement('section');
contentContainer.setAttribute('class', 'content');
subContainer.appendChild(contentContainer);

const contentParagraph = document.createElement('p'); // Creating element to insert the content text
contentContainer.appendChild(contentParagraph); // Adding the paragraph to the contenContainer element

// Data example response - data asynchronously 
const response = [{ tabName: 'tab 1', content: 'content 1'}, { tabName: 'tab 2', content: 'content 2'}, { tabName: 'tab 3', content: 'content 3'}, { tabName: 'tab 4', content: 'content 4'}, { tabName: 'tab 5', content: 'content 5'}];

// To go through each element of the response array
for (let i = 0; i < response.length; i ++) {
    // Creating tab elements 
    let tab = document.createElement('section'); // Tab element
    tab.setAttribute('id', 'tab-' + i); // Adding id to the tab element
    tab.setAttribute('class', 'tab'); // Set default class to tab element

    // Adding the activeTab class to the first element of the reponse array
    if (i === 0) {
        tab.classList.add("activeTab"); // Setting activeTab to the firsrt elemet of the array 
        contentParagraph.textContent = response[i].content; // Inserting the content of the first element of the response array
    } else {
        tab.classList.add("inactiveTab"); // At this point all other elements are with inactiveTab class
    }
       
    // Creating h2 element top set the name of each tab there
    let tabName = document.createElement('h2'); // creating h2 element 
        tabName.textContent = response[i].tabName; // Setting each name to the tabs
        tab.appendChild(tabName); // Adding the h2 element to the tab element

    // Adding tab element to subcontainer element
    tabContainerElement.appendChild(tab);

    // Adding click event to every tab 
    tab.addEventListener('click', () => {

        // When click happens then add inactive class to
        [...document.getElementsByClassName("tab")].forEach(
            (element, index, array) => {
                element.classList.add("inactiveTab");
            }
        );

        // Removing inactiveTab class of current clicked tab
        tab.classList.remove("inactiveTab");

         // Adding activeTab class of current clicked tab
        tab.classList.add("activeTab");

        // Calling the handlerContent to insert the content when current tab clicked
        handlerContent(response[i]);
    });
}

// Method to show content into the content element
function handlerContent(item) {
    contentParagraph.textContent = '';
    contentParagraph.textContent = item.content;
}

Result:

Default view