How to create Dynamic Tabs (Tabs Toggleable) Using Bootstrap

What Will I Learn?

You will learn how to create navbar tabs
You will learn how to create tabs content

Requirements

You have basic about HTML
You have basic about CSS
You have basic about JavaScript

Difficulty

Basic

Tutorial Contents

Tabs are form of navigation that allows a user to browse multiple web pages in a single window. The tabs like navbar ( menu-bar). And the Dinamic Tabs is the tabs that has content, so when we click a tab, then the content will be display without loading other page. All tabs content in one page. How to create it ? Let's Follow the Steps bellow :

Create a html file rename it tabs.html or you can also rename by other name as you like.
As usual in using bootstrap framework we should host the bootstrap file or add the bootstrap CDN. In this tutorial we will use the bootstrap CDN only, It's more simple. Here the full code, Paste it in tabs.html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>Dinamic Tabs</title>
</head>
<body>
    modify the code here . . . . . 
</body>
</html>

Now, We will continue in creating the tabs. to create the tabs from bootstrap we can use the .nav and .nav-tabs class. Add the following code in <body> element, Then Save and try to run on your browser.

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#tab1">Tab 1</a></li>
  <li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
</ul>

data-toggle="tab" attribute to each link , href="#home" : content link, when clik on the tab the content will appear.

Adding the tabs content. We have created 3 tabs above, so we must create 3 content with id as mention in tab element, ei : home , tab1, and tab2. Paste the code bellow under the tabs part element.

<div class="tab-content">
        <div id="home" class="tab-pane fade in active">
            <h3>HOME</h3>
            <p>Assalamualaikum Warahmatullahi Wabarakatuhu</p>
        </div>
        <div id="tab1" class="tab-pane fade">
            <h3>Tab1 Content</h3>
            <p>Don't Forget</p>
        </div>
        <div id="tab2" class="tab-pane fade">
            <h3>Tab2 Content</h3>
            <p>to vote utopian-io as witnes</p>
        </div>
    </div>

.fade to make tabs fade in and out when clicking

Finish, Here the full code and for demo you can visit my fiddle here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>Dinamic Tabs</title>
</head>
<body>
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
        <li><a data-toggle="tab" href="#tab1">Tab 1</a></li>
        <li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
    </ul>
    <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
            <h3>HOME</h3>
            <p>Assalamualaikum Warahmatullahi Wabarakatuhu</p>
        </div>
        <div id="tab1" class="tab-pane fade">
            <h3>Tab1 Content</h3>
            <p>Don't Forget</p>
        </div>
        <div id="tab2" class="tab-pane fade">
            <h3>Tab2 Content</h3>
            <p>to vote utopian-io as witnes</p>
        </div>
    </div>
</body>
</html>

Curriculum

Posted on Utopian.io - Rewarding Open Source Contributors