Bootstrap Tabs:

Responsive Bootstrap Tabs with Icons

At current times, many tasks can be done online. especially due to the Covid-19 pandemic, for the past year, people have been shopping online to avoid unnecessary contact with other people. Due to this, e-commerce and online stores have become increasingly popular. So, if you happen to own a website based on selling online products, you can use this situation to your advantage. You just need to improve your website’s design and make it look better and the revenue will start to go up automatically. One of the most important things to do in an online store is to find a way to organize all the different products available for purchase in a nice and interesting manner. One of such methods is using Bootstrap tabs.

Below, we are sharing a code for a Beautiful tab with icons which lets you categorize all your products. This is perfect if your site offers a lot of products since searching through unorganized lists is really not interesting for the users. The design is pretty clean and modern and it features a light blue and white theme. Each of the responsive tabs has an icon and a name besides it. There are also a number of cards with a short description under each tab. There is an option of displaying the products under each tab in a three-column format or you can use the default full width tabs with one-column layout.

Bootstrap Tabs

Responsive Tabs

Full Width Tabs

Beautiful Tabs with Icon

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <header class="clearfix">
        <span>
            <span class="bp-icon bp-icon-about" data-content="The Blueprints are a collection of basic and minimal website concepts, components, plugins and layouts with minimal style for easy adaption and usage, or simply for inspiration."></span>
        </span>
        <h1>Responsive Full Width Tabs</h1>
    </header>
    <div id="tabs" class="tabs">
        <nav>
            <ul>
                <li>
                    <a href="#section-1"><i class="material-icons">shopping_cart</i><span>Shopping</span></a>
                </li>
                <li>
                    <a href="#section-2"><i class="material-icons">local_drink</i><span>Drinks</span></a>
                </li>
                <li>
                    <a href="#section-3"><i class="material-icons">fastfood</i><span>Food</span></a>
                </li>
                <li>
                    <a href="#section-4"><i class="material-icons">science</i><span>Lab</span></a>
                </li>
                <li>
                    <a href="#section-5"><i class="material-icons">shop</i><span><span>Order</span></a>
                </li>
            </ul>
        </nav>
        <div class="content">
            <section id="section-1">
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-01.png" alt="img01" />
                    <h3>Sushi Gumbo Beetroot</h3>
                    <p>Sushi gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.</p>
                </div>
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-02.png" alt="img02" />
                    <h3>Pea Sprouts Fava Soup</h3>
                    <p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.</p>
                </div>
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-03.png" alt="img03" />
                    <h3>Turnip Broccoli Sashimi</h3>
                    <p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip.</p>
                </div>
            </section>
            <section id="section-2">
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-04.png" alt="img04" />
                    <h3>Asparagus Cucumber Cake</h3>
                    <p>Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd.</p>
                </div>
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-05.png" alt="img05" />
                    <h3>Magis Kohlrabi Gourd</h3>
                    <p>Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.</p>
                </div>
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-06.png" alt="img06" />
                    <h3>Ricebean Rutabaga</h3>
                    <p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori.</p>
                </div>
            </section>
            <section id="section-3">
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-02.png" alt="img02" />
                    <h3>Noodle Curry</h3>
                    <p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.Sushi gumbo beet greens corn soko endive gumbo gourd.</p>
                </div>
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-06.png" alt="img06" />
                    <h3>Leek Wasabi</h3>
                    <p>Sushi gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.</p>
                </div>
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-01.png" alt="img01" />
                    <h3>Green Tofu Wrap</h3>
                    <p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut wasabi tofu broccoli mixture soup.</p>
                </div>
            </section>
            <section id="section-4">
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-03.png" alt="img03" />
                    <h3>Tomato Cucumber Curd</h3>
                    <p>Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd.</p>
                </div>
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-01.png" alt="img01" />
                    <h3>Mushroom Green</h3>
                    <p>Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.</p>
                </div>
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-04.png" alt="img04" />
                    <h3>Swiss Celery Chard</h3>
                    <p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori.</p>
                </div>
            </section>
            <section id="section-5">
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-02.png" alt="img02" />
                    <h3>Radish Tomato</h3>
                    <p>Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut.</p>
                </div>
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-06.png" alt="img06" />
                    <h3>Fennel Wasabi</h3>
                    <p>Sea lettuce gumbo grape kale kombu cauliflower salsify kohlrabi okra sea lettuce broccoli celery lotus root carrot winter purslane turnip greens garlic.</p>
                </div>
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-01.png" alt="img01" />
                    <h3>Red Tofu Wrap</h3>
                    <p>Green horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut wasabi tofu broccoli mixture soup.</p>
                </div>
            </section>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

.tabs {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 1em 0 2em;
    font-weight: 300;
}
/* Nav */
.tabs nav {
    text-align: center;
}
.tabs nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: inline-block;
}
.tabs nav ul li {
    border: 1px solid #becbd2;
    border-bottom: none;
    margin: 0 0.25em;
    display: block;
    float: left;
    position: relative;
}
.tabs nav li.tab-current {
    border: 1px solid #47a3da;
    box-shadow: inset 0 2px #47a3da;
    border-bottom: none;
    z-index: 100;
}
.tabs nav li.tab-current:before,
.tabs nav li.tab-current:after {
    content: "";
    position: absolute;
    height: 1px;
    right: 100%;
    bottom: 0;
    width: 1000px;
    background: #47a3da;
}
.tabs nav li.tab-current:after {
    right: auto;
    left: 100%;
    width: 4000px;
}
.tabs nav a {
    color: #becbd2;
    display: block;
    font-size: 1.45em;
    line-height: 2.5;
    padding: 0 1.25em;
    white-space: nowrap;
}
.tabs nav a:hover {
    color: #768e9d;
}
.tabs nav li.tab-current a {
    color: #47a3da;
}
/* Icons */
.tabs nav a:before {
    display: inline-block;
    vertical-align: middle;
    text-transform: none;
    font-weight: normal;
    font-variant: normal;
    font-family: "icomoon";
    line-height: 1;
    speak: none;
    -webkit-font-smoothing: antialiased;
    margin: -0.25em 0.4em 0 0;
}
.icon-food:before {
    content: "\e600";
}
.icon-lab:before {
    content: "\e601";
}
.icon-cup:before {
    content: "\e602";
}
.icon-truck:before {
    content: "\e603";
}
.icon-shop:before {
    content: "\e604";
}
/* Content */
.content section {
    font-size: 1.25em;
    padding: 3em 1em;
    display: none;
    max-width: 1230px;
    margin: 0 auto;
}
.content section:before,
.content section:after {
    content: "";
    display: table;
}
.content section:after {
    clear: both;
}
/* Fallback example */
.no-js .content section {
    display: block;
    padding-bottom: 2em;
    border-bottom: 1px solid #47a3da;
}
.content section.content-current {
    display: block;
}
.mediabox {
    float: left;
    width: 33%;
    padding: 0 25px;
}
.mediabox img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}
.mediabox h3 {
    margin: 0.75em 0 0.5em;
}
.mediabox p {
    padding: 0 0 1em 0;
    margin: 0;
    line-height: 1.3;
}
/* Example media queries */
@media screen and (max-width: 52.375em) {
    .tabs nav a span {
        display: none;
    }
    .tabs nav a:before {
        margin-right: 0;
    }
    .mediabox {
        float: none;
        width: auto;
        padding: 0 0 35px 0;
        font-size: 90%;
    }
    .mediabox img {
        float: left;
        margin: 0 25px 10px 0;
        max-width: 40%;
    }
    .mediabox h3 {
        margin-top: 0;
    }
    .mediabox p {
        margin-left: 40%;
        margin-left: calc(40% + 25px);
    }
    .mediabox:before,
    .mediabox:after {
        content: "";
        display: table;
    }
    .mediabox:after {
        clear: both;
    }
}
@media screen and (max-width: 32em) {
    .tabs nav ul,
    .tabs nav ul li a {
        width: 100%;
        padding: 0;
    }
    .tabs nav ul li {
        width: 20%;
        width: calc(20% + 1px);
        margin: 0 0 0 -1px;
    }
    .tabs nav ul li:last-child {
        border-right: none;
    }
    .mediabox {
        text-align: center;
    }
    .mediabox img {
        float: none;
        margin: 0 auto;
        max-width: 100%;
    }
    .mediabox h3 {
        margin: 1.25em 0 1em;
    }
    .mediabox p {
        margin: 0;
    }
}

(function (window) {
    "use strict";
    function extend(a, b) {
        for (var key in b) {
            if (b.hasOwnProperty(key)) {
                a[key] = b[key];
            }
        }
        return a;
    }
    function cTabs(el, options) {
        this.el = el;
        this.options = extend({}, this.options);
        extend(this.options, options);
        this._init();
    }
    cTabs.prototype.options = {
        start: 0,
    };
    cTabs.prototype._init = function () {
        // tabs elemes
        this.tabs = [].slice.call(this.el.querySelectorAll("nav > ul > li"));
        // content items
        this.items = [].slice.call(this.el.querySelectorAll(".content > section"));
        // current index
        this.current = -1;
        // show current content item
        this._show();
        // init events
        this._initEvents();
    };
    cTabs.prototype._initEvents = function () {
        var self = this;
        this.tabs.forEach(function (tab, idx) {
            tab.addEventListener("click", function (ev) {
                ev.preventDefault();
                self._show(idx);
            });
        });
    };
    cTabs.prototype._show = function (idx) {
        if (this.current >= 0) {
            this.tabs[this.current].className = "";
            this.items[this.current].className = "";
        }
        // change current
        this.current = idx != undefined ? idx : this.options.start >= 0 && this.options.start < this.items.length ? this.options.start : 0;
        this.tabs[this.current].className = "tab-current";
        this.items[this.current].className = "content-current";
    };
    // add to global namespace
    window.cTabs = cTabs;
})(window);
new cTabs( document.getElementById( 'tabs' ) );

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style>
.tabs {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 1em 0 2em;
    font-weight: 300;
}
/* Nav */
.tabs nav {
    text-align: center;
}
.tabs nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: inline-block;
}
.tabs nav ul li {
    border: 1px solid #becbd2;
    border-bottom: none;
    margin: 0 0.25em;
    display: block;
    float: left;
    position: relative;
}
.tabs nav li.tab-current {
    border: 1px solid #47a3da;
    box-shadow: inset 0 2px #47a3da;
    border-bottom: none;
    z-index: 100;
}
.tabs nav li.tab-current:before,
.tabs nav li.tab-current:after {
    content: "";
    position: absolute;
    height: 1px;
    right: 100%;
    bottom: 0;
    width: 1000px;
    background: #47a3da;
}
.tabs nav li.tab-current:after {
    right: auto;
    left: 100%;
    width: 4000px;
}
.tabs nav a {
    color: #becbd2;
    display: block;
    font-size: 1.45em;
    line-height: 2.5;
    padding: 0 1.25em;
    white-space: nowrap;
}
.tabs nav a:hover {
    color: #768e9d;
}
.tabs nav li.tab-current a {
    color: #47a3da;
}
/* Icons */
.tabs nav a:before {
    display: inline-block;
    vertical-align: middle;
    text-transform: none;
    font-weight: normal;
    font-variant: normal;
    font-family: "icomoon";
    line-height: 1;
    speak: none;
    -webkit-font-smoothing: antialiased;
    margin: -0.25em 0.4em 0 0;
}
.icon-food:before {
    content: "\e600";
}
.icon-lab:before {
    content: "\e601";
}
.icon-cup:before {
    content: "\e602";
}
.icon-truck:before {
    content: "\e603";
}
.icon-shop:before {
    content: "\e604";
}
/* Content */
.content section {
    font-size: 1.25em;
    padding: 3em 1em;
    display: none;
    max-width: 1230px;
    margin: 0 auto;
}
.content section:before,
.content section:after {
    content: "";
    display: table;
}
.content section:after {
    clear: both;
}
/* Fallback example */
.no-js .content section {
    display: block;
    padding-bottom: 2em;
    border-bottom: 1px solid #47a3da;
}
.content section.content-current {
    display: block;
}
.mediabox {
    float: left;
    width: 33%;
    padding: 0 25px;
}
.mediabox img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}
.mediabox h3 {
    margin: 0.75em 0 0.5em;
}
.mediabox p {
    padding: 0 0 1em 0;
    margin: 0;
    line-height: 1.3;
}
/* Example media queries */
@media screen and (max-width: 52.375em) {
    .tabs nav a span {
        display: none;
    }
    .tabs nav a:before {
        margin-right: 0;
    }
    .mediabox {
        float: none;
        width: auto;
        padding: 0 0 35px 0;
        font-size: 90%;
    }
    .mediabox img {
        float: left;
        margin: 0 25px 10px 0;
        max-width: 40%;
    }
    .mediabox h3 {
        margin-top: 0;
    }
    .mediabox p {
        margin-left: 40%;
        margin-left: calc(40% + 25px);
    }
    .mediabox:before,
    .mediabox:after {
        content: "";
        display: table;
    }
    .mediabox:after {
        clear: both;
    }
}
@media screen and (max-width: 32em) {
    .tabs nav ul,
    .tabs nav ul li a {
        width: 100%;
        padding: 0;
    }
    .tabs nav ul li {
        width: 20%;
        width: calc(20% + 1px);
        margin: 0 0 0 -1px;
    }
    .tabs nav ul li:last-child {
        border-right: none;
    }
    .mediabox {
        text-align: center;
    }
    .mediabox img {
        float: none;
        margin: 0 auto;
        max-width: 100%;
    }
    .mediabox h3 {
        margin: 1.25em 0 1em;
    }
    .mediabox p {
        margin: 0;
    }
}
</style>

</head>
<body>
<div class="container">
    <header class="clearfix">
        <span>
            <span class="bp-icon bp-icon-about" data-content="The Blueprints are a collection of basic and minimal website concepts, components, plugins and layouts with minimal style for easy adaption and usage, or simply for inspiration."></span>
        </span>
        <h1>Responsive Full Width Tabs</h1>
    </header>
    <div id="tabs" class="tabs">
        <nav>
            <ul>
                <li>
                    <a href="#section-1"><i class="material-icons">shopping_cart</i><span>Shopping</span></a>
                </li>
                <li>
                    <a href="#section-2"><i class="material-icons">local_drink</i><span>Drinks</span></a>
                </li>
                <li>
                    <a href="#section-3"><i class="material-icons">fastfood</i><span>Food</span></a>
                </li>
                <li>
                    <a href="#section-4"><i class="material-icons">science</i><span>Lab</span></a>
                </li>
                <li>
                    <a href="#section-5"><i class="material-icons">shop</i><span><span>Order</span></a>
                </li>
            </ul>
        </nav>
        <div class="content">
            <section id="section-1">
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-01.png" alt="img01" />
                    <h3>Sushi Gumbo Beetroot</h3>
                    <p>Sushi gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.</p>
                </div>
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-02.png" alt="img02" />
                    <h3>Pea Sprouts Fava Soup</h3>
                    <p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.</p>
                </div>
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-03.png" alt="img03" />
                    <h3>Turnip Broccoli Sashimi</h3>
                    <p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip.</p>
                </div>
            </section>
            <section id="section-2">
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-04.png" alt="img04" />
                    <h3>Asparagus Cucumber Cake</h3>
                    <p>Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd.</p>
                </div>
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-05.png" alt="img05" />
                    <h3>Magis Kohlrabi Gourd</h3>
                    <p>Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.</p>
                </div>
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-06.png" alt="img06" />
                    <h3>Ricebean Rutabaga</h3>
                    <p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori.</p>
                </div>
            </section>
            <section id="section-3">
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-02.png" alt="img02" />
                    <h3>Noodle Curry</h3>
                    <p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.Sushi gumbo beet greens corn soko endive gumbo gourd.</p>
                </div>
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-06.png" alt="img06" />
                    <h3>Leek Wasabi</h3>
                    <p>Sushi gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.</p>
                </div>
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-01.png" alt="img01" />
                    <h3>Green Tofu Wrap</h3>
                    <p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut wasabi tofu broccoli mixture soup.</p>
                </div>
            </section>
            <section id="section-4">
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-03.png" alt="img03" />
                    <h3>Tomato Cucumber Curd</h3>
                    <p>Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd.</p>
                </div>
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-01.png" alt="img01" />
                    <h3>Mushroom Green</h3>
                    <p>Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.</p>
                </div>
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-04.png" alt="img04" />
                    <h3>Swiss Celery Chard</h3>
                    <p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori.</p>
                </div>
            </section>
            <section id="section-5">
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-02.png" alt="img02" />
                    <h3>Radish Tomato</h3>
                    <p>Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut.</p>
                </div>
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-06.png" alt="img06" />
                    <h3>Fennel Wasabi</h3>
                    <p>Sea lettuce gumbo grape kale kombu cauliflower salsify kohlrabi okra sea lettuce broccoli celery lotus root carrot winter purslane turnip greens garlic.</p>
                </div>
                <div class="mediabox">
                    <img src="http://frontendfreecode.com/img/img-01.png" alt="img01" />
                    <h3>Red Tofu Wrap</h3>
                    <p>Green horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut wasabi tofu broccoli mixture soup.</p>
                </div>
            </section>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
(function (window) {
    "use strict";
    function extend(a, b) {
        for (var key in b) {
            if (b.hasOwnProperty(key)) {
                a[key] = b[key];
            }
        }
        return a;
    }
    function cTabs(el, options) {
        this.el = el;
        this.options = extend({}, this.options);
        extend(this.options, options);
        this._init();
    }
    cTabs.prototype.options = {
        start: 0,
    };
    cTabs.prototype._init = function () {
        // tabs elemes
        this.tabs = [].slice.call(this.el.querySelectorAll("nav > ul > li"));
        // content items
        this.items = [].slice.call(this.el.querySelectorAll(".content > section"));
        // current index
        this.current = -1;
        // show current content item
        this._show();
        // init events
        this._initEvents();
    };
    cTabs.prototype._initEvents = function () {
        var self = this;
        this.tabs.forEach(function (tab, idx) {
            tab.addEventListener("click", function (ev) {
                ev.preventDefault();
                self._show(idx);
            });
        });
    };
    cTabs.prototype._show = function (idx) {
        if (this.current >= 0) {
            this.tabs[this.current].className = "";
            this.items[this.current].className = "";
        }
        // change current
        this.current = idx != undefined ? idx : this.options.start >= 0 && this.options.start < this.items.length ? this.options.start : 0;
        this.tabs[this.current].className = "tab-current";
        this.items[this.current].className = "content-current";
    };
    // add to global namespace
    window.cTabs = cTabs;
})(window);
new cTabs( document.getElementById( 'tabs' ) );
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS