3 Easy Steps To Create HTML Tabs For Beginners

Previously, we discussed creating an Accordion using HTML, CSS & JavaScript. In today’s article, we will look at how we can create HTML tabs from scratch.

Many of us are familiar with Tabs. We have used such tabs while using various web applications. If you are not familiar with how HTML Tabs looks then here is the live demo of HTML Tabs.

In this article we will discuss on every steps that are required for building HTML tabs. All you need is a code editor or IDE to write some lines of code. You will also need a browser to execute those piece of code.

For this project, we will be using a code editor named Visual Studio Code and Google Chrome Browser. It is not necessary that you use the same software to build this project. You can use a code editor & browser of your own preference.

Once you are ready installing the software, create a folder in your local machine (computer) and open that specific folder inside your code editor.

This article is for those who are complete beginners and have a basic understanding of HTML and CSS. If you are a beginner then it is absolutely great. You will have some hands-on practice.

Alright! I am happy that you reached here following my instructions. Let’s Jump to our tutorial now.

So I have divided this tutorial mainly into three parts. Structuring with HTML, Styling Tabs & Functionality With JavaScript.

Section A : Structuring with HTML

In this section we will write some HTML code so that we can provide a basic structure for our Tabs. In your code editor create a file with name “Index.html”, once the file is created start writing all the codes implemented in the code snippets below.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Tabs Tutorials</title>
        <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="tabs.css">
    </head>

    <body>
        <div class="tab">
            <button class="tablinks" onclick="displayContent(event, 'dashboard')">Dashboard</button>
            <button class="tablinks" onclick="displayContent(event, 'analytics')">Analytics</button>
            <button class="tablinks" onclick="displayContent(event, 'profile')">Profile</button>
            <button class="tablinks" onclick="displayContent(event, 'setting')">Settings</button>
        </div>

        <div class="tab-content" id="dashboard">
            <h4>Welcome To Dashboard Tab</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, aspernatur? Nulla ab aliquid nobis
                vero impedit enim asperiores iusto?
                Harum velit veniam possimus quos non tenetur doloremque dolores ut officiis.
            </p>
        </div>

        <div class="tab-content" id="analytics">
            <h4>Welcome To Analytics Tab</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, aspernatur? Nulla ab aliquid nobis
                vero impedit enim asperiores iusto?
                Harum velit veniam possimus quos non tenetur doloremque dolores ut officiis.
            </p>
        </div>

        <div class="tab-content" id="profile">
            <h4>Welcome To Profile Tab</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, aspernatur? Nulla ab aliquid nobis
                vero impedit enim asperiores iusto?
                Harum velit veniam possimus quos non tenetur doloremque dolores ut officiis.
            </p>
        </div>

        <div class="tab-content" id="setting">
            <h4>Welcome To Setting Tab</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, aspernatur? Nulla ab aliquid nobis
                vero impedit enim asperiores iusto?
                Harum velit veniam possimus quos non tenetur doloremque dolores ut officiis.
            </p>
        </div>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

Code Explained

In the above code snippet, you will see a piece of code that represents the HTML. The code implements the basic HTML code structure.

The head section includes a code to link an external CSS file where we will implement all the necessary code to style the HTML document. Similarly, we will use a Google Font for our project. You can see a piece of code that is linking our HTML document with Google Font.

Inside the body element, there are a couple of div elements with a heading & paragraph elements placed inside it. Before the body ends you will see a code snippet that is linking to the JavaScript file. With the help of this file, we will make our program fully functional.

Section B : Styling Tabs

In this section, we will write some code to style the HTML elements. Now, create another file in your code editor & name it style.css.

Now, copy all the codes from the code snippet below and paste into your style.css file.

Always remember to link both the HTML and CSS files together before writing some codes. If you forgot to link these files then you will not be able to see any changes within your program.

body{
    padding: 0;
    margin:0;
    font-family: 'Roboto',sans-serif;
}

.tab{
    width: 50%;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    margin:auto;
    margin-top: 50px;
}

.tab button{
    border: none;
    float: left;
    padding: 14px 16px;
    font-size: 16px;
    cursor: pointer;
    outline: none;
}

.tab button:hover{
    background-color: #ccc;
}

.tab-content{
    width: 50%;
    margin: auto;
    margin-top:0;
    display: none;
}

.tab-content p, .tab-content h4{
    padding: 0 12px;
}

.tab button.active{
    background-color: #ccc;
}

Code Explained

In the above code snippets we can see some code to style our HTML Tabs.

At first we will reset the browser padding & margin. We will be using same google font throughout our project so we will place the font-family property inside the body selector.

The benefit of doing this is that we don’t need to write same lines of code every time.

In order to style a class first, we will write a class name followed by a period (.) sign and start writing style which is wrapped with curly braces.

Similarly, we have defined styles for every element. You can write each line of code manually and see how these piece of code acts.

Section C : Functionality With JavaScript

In this section we will implement the JavaScript programming language. With the help of javascript we can make our program fully functional. I mean it will definitely work when you click. Just Kidding!

Now create a file with name script.js inside your code editor. Once the file is created use the javascript code from the code snippet below.

And yes don’t forget to link your javascript file with your index file. Else the program will not run as expected.

function displayContent(event, text) {
    var tabContent = document.getElementsByClassName("tab-content");
    for (var i = 0; i < tabContent.length; i++) {
        tabContent[i].style.display = "none";
    }

    var tabLinks = document.getElementsByClassName("tablinks");
    for (var i = 0; i < tabLinks.length; i++) {
        tabLinks[i].className = tabLinks[i].className.replace(" active", "");
    }

    document.getElementById(text).style.display = "block";
    event.currentTarget.className += " active";
}

Code Explained

The above code snippet represents the JavaScript function which takes two parameters, event & text. So the event here is the onClick event of the javascript and the text represents a unique id that we created inside our index file while creating a div with name tab-content.

Still don’t remember? Go to your index.html file and you will see an id attribute along with the class name tab-content. Each division consists of a unique Id.

When a user opens a program for the first time all the content is hidden except a couple of buttons. This hidden property is implemented inside our style.css file.

Now when user click on the button these two line of code get executed at first.

  1. document.getElementById(text).style.display = “block”;
  2. event.currentTarget.className += ” active”;

Let’s say when the user clicks on the Dashboard Tab at first a class named “active” is added to the button which results in a change of the background color. Also, remember that function also gets triggered when the button is pressed.

Do you remember we have written this code inside our index.html file?

<button class="tablinks" onclick="displayContent(event, 'dashboard')">Dashboard</button>

See there is a function named “displayContent” that we created inside our script.js file. The second parameter i.e. dashboard is an id defined something like this in our index.html file.

<div class="tab-content" id="dashboard"> Some Content </div>

Now, all the content with the id dashboard are shown as the display property is now changed to block.

Let’s click on the next tab Analytics. Did you see some changes? The background color of the Dashboard Tab has now restored to the previous color and the content is hidden. But how?

Now these two code gets executed

vartabContent = document.getElementsByClassName("tab-content");

for(vari = 0; i < tabContent.length; i++)

{

tabContent[i].style.display = "none";

}

vartabLinks = document.getElementsByClassName("tablinks");

for(vari = 0; i < tabLinks.length; i++)

{

tabLinks[i].className = tabLinks[i].className.replace(" active", "");

}

So when we click on the next tab the for loop determines the index of the previous tab and hides the content of the tab & removes the active class from the previous button.

Video Tutorial : Create HTML Tabs Using HTML, CSS & JavaScript

Conclusion

So this is how we can create a HTML tabs for our website. If you have any other methods for creating HTML tabs we will be happy to learn it too. If you have any queries regarding our article or any of the content we create please let us know.