JSFiddle - React, Tailwind, and code Playground

by holoverse

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
<div id="progressbar"><div id="display">10</div></div>

<ul class="nav nav-tabs" id="tab_bar">
        <li class="active"><a href="#introduction" data-toggle="tab">Intro</a></li>
        <li><a href="#secondtab" data-toggle="tab">SecondTab</a></li>
        <li><a href="#thirdtab" data-toggle="tab">Third</a></li>
        <li><a href="#fourthtab" data-toggle="tab">Fourth</a></li>
        <li><a href="#fifthtab" data-toggle="tab">5</a></li>
        <li><a href="#sixthtab" data-toggle="tab">6</a></li>
        <li><a href="#seventhtab" data-toggle="tab">7</a></li>
        <li><a href="#eighthtab" data-toggle="tab">8</a></li>
    </ul>


<div class="tab-content">
    <div class="tab-pane" id="introduction">asdasdasdas</div>
    <div class="tab-pane" id="secondtab">asdasdsagreteryterythhgh</div>
    <div class="tab-pane" id="thirdtab">rthrthrthrthrt</div>
    <div class="tab-pane" id="fourthtab">yujghjuyjyuje1412dgjhegj</div>
    <div class="tab-pane" id="fifthtab">yuj123123<br>jyujedgjhegj</div>
    <div class="tab-pane" id="sixthtab">yujg2342342edgjhegj</div>
    <div class="tab-pane" id="seventhtab">yu12321321fdsfsdfdedgjhegj</div>
    <div class="tab-pane" id="eighthtab">yujsdfsdfsdfsdfedgjhegj</div>
        
</div> 
    
    <a class="btn btn-primary" id="prevtab" type="button">Prev</button>
    <a class="btn btn-primary" id="nexttab" type="button">Next</button>

CSS

#progressbar {
    width:10%;
    background:url('http://line25.com/wp-content/uploads/2011/backgrounds/05.jpg');
    height:20px;
    margin-bottom:40px;
}
.btn {
    margin-right:20px;
    margin-top:20px;
}

JavaScript

function setProgress() {
    var length = $tabs.length;
    var index = ($('li').index($(".active"))) + 1;
    var width = (index / length) * 100;
    $('#progressbar').css('width', width + '%');
    $('#display').html(width+'%');
    if(index==1){$('#prevtab').hide();}
    else if(index==length){$('#nexttab').hide();}
    else {$('#nexttab').show();$('#prevtab').show();
    }
}

$('a').removeAttr('href');

var $tabs = $('#tab_bar li');
$('li').css('cursor','not-allowed');
setProgress();

$('#prevtab').on('click', function () {
    $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
    setProgress();
});

$('#nexttab').on('click', function () {
    $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
    setProgress();
});

$tabs.click(function () {
    setTimeout(setProgress, 200)
});