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

Hey @sogata I am @utopian-io. I have just upvoted you!

Achievements

Seems like you contribute quite often. AMAZING!

Suggestions

Contribute more often to get higher and higher rewards. I wish to see you often!
Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

Vote for my Witness With SteemConnect
Proxy vote to Utopian Witness with SteemConnect
Or vote/proxy on Steemit Witnesses

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

Sort Order:

Trending

[-]

rufans (68) · 7 years ago

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

$0.18

1 vote

tanisya (41) · 7 years ago

👏👏 @sogata... 👍

$0.00

jhen-jhen (40) · 7 years ago

Bereh-bereh di

darmian23 (42) · 7 years ago

Vote long Lee @darmian23

zikril04 (45) · 7 years ago

bereh @sogata

utopian-io (71) · 7 years ago