JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#Tab1">Tab 1</a></li>
    <li><a href="#Tab2">Tab 2</a></li>
    <li><a href="#Tab3">Tab 3</a></li>
    <li><a href="#Tab4">Tab 4</a></li>
    <li><a href="#Tab5">Tab 5</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="Tab1"></div>
    <div id="Tab2" class="tab-pane"></div>
    <div class="tab-pane" id="Tab3"></div>
    <div id="tab4" class="tab-pane"></div>
    <div id="Tab5" class="tab-pane"></div>
</div>

JavaScript

var tabChange = function () {
    var tabs = $('.nav-tabs > li');
    var active = tabs.filter('.active');
    var next = active.next('li').length ? active.next('li').find('a') : tabs.filter(':first-child').find('a');
    // Use the Bootsrap tab show method
    next.tab('show');
};
// Tab Cycle function
var tabCycle = setInterval(tabChange, 10000);

// Tab click event handler
$('a').on('click', function (e) {
    e.preventDefault();
    // Stop the cycle
    clearInterval(tabCycle);
    // Show the clicked tabs associated tab-pane
    $(this).tab('show');
    // Start the cycle again in a predefined amount of time
    setTimeout(function () {
        //tabCycle = setInterval(tabChange, 5000);
    }, 10000);
});