<div class="tabWrap">
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li role="presentation" class="tabToggle active"><a href="#firstPanel" class="tabAnchor firstPanel text-center" data-color="#01bcd6" aria-controls="firstPanel" role="tab" data-toggle="tab">First Tab</a></li>
<li class="shifter shifterBack tabToggle hidden"><a class="text-center"><i class="fa fa-angle-double-left"></i></a></li>
<li role="presentation"><a href="#secondPanel" class="tabAnchor secondPanel text-center" data-color="#9d21b2" aria-controls="secondPanel" role="tab" data-toggle="tab">Tab Two</a></li>
<li role="presentation"><a href="#thirdPanel" class="tabAnchor thirdPanel text-center" data-color="#ff6a16" aria-controls="thirdPanel" role="tab" data-toggle="tab">(2 + 1)rd Tab</a></li>
<li role="presentation"><a href="#fourthPanel" class="tabAnchor fourthPanel text-center" data-color="#fca901" aria-controls="fourthPanel" role="tab" data-toggle="tab">Fourth Tab</a></li>
<li class="shifter shifterForward tabToggle"><a class="text-center"><i class="fa fa-angle-double-right"></i></a></li>
<li role="presentation" class="tabToggle hidden"><a href="#fifthPanel" class="tabAnchor fifthPanel text-center" data-color="#333333" aria-controls="fifthPanel" role="tab" data-toggle="tab">You Found Me!</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="firstPanel">
<div class="tabInner">
<h2>First Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<button class="btn">Action</button>
</div> <!-- /.tabInner -->
</div> <!-- /.tabpanel -->
<div role="tabpanel" class="tab-pane" id="secondPanel">
<div class="tabInner">
<h2>Tab Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<button class="btn">Action</button>
</div> <!-- /.tabInner -->
</div> <!-- /.tabpanel -->
<div role="tabpanel" class="tab-pane" id="thirdPanel">
<div class="tabInner">
<h2>(2 + 1)rd Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<button class="btn">Action</button>
</div> <!-- /.tabInner -->
</div> <!-- /.tabpanel -->
<div role="tabpanel" class="tab-pane" id="fourthPanel">
<div class="tabInner">
<h2>Fourth Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<button class="btn">Action</button>
</div> <!-- /.tabInner -->
</div> <!-- /.tabpanel -->
<div role="tabpanel" class="tab-pane" id="fifthPanel">
<div class="tabInner">
<h2>You Found Me!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<button class="btn">Action</button>
</div> <!-- /.tabInner -->
</div> <!-- /.tabpanel -->
</div> <!-- /.tab-content -->
</div> <!-- /.tabWrap -->
// colors
$white: #ffffff
$offwhite: #f5f5f5
$lightBlue: #01bcd6
$lightBlueTrans: rgba(1, 188, 214, 0.85)
$purple: #9d21b2
$purpleTrans: rgba(157, 33, 178, 0.85)
$orange: #ff6a16
$orangeTrans: rgba(255, 106, 22, 0.85)
$yellow: #fca901
$yellowTrans: rgba(252, 169, 1, 0.85)
$black: #333333
$blackTrans: rgba(51, 51, 51, 0.85)
$transition: .2s ease all
$tabWrapWidth: 600px
// bootstrap overrides
.nav li a:focus, .nav li a:hover
background: transparent
// tab styles
.tabWrap
width: $tabWrapWidth
margin: 50px
background: $offwhite
.tab-content
height: 220px
padding: 10px 5px
position: relative
background: $lightBlue
.tab-pane
position: relative
bottom: 10px
.nav-tabs li.active a, .nav-tabs li.active a:focus, .nav-tabs li.active a:hover // overrides bootstrap base style
border: none
color: $white
background: none
.nav-tabs // overrides bootstrap base style
li
width: 24%
a
border-radius: 0
color: $white
border: none
padding: 15px 0
margin-right: 0
.shifter
width: 4%
transition: $transition
.shifterBack
background: $purple
border-right: 1px solid $offwhite
&:hover
background: $purpleTrans
a:hover
background: transparent
.shifterForward
border-left: 1px solid $offwhite
background: $yellow
&:hover
background: $yellowTrans
a:hover
background: transparent
.tabAnchor
transition: $transition
.tabInner
padding: 10px
margin: 10px
height: 200px
background: $white
border-radius: 10px
.tabToggle
transition: $transition
.firstPanel, .nav-tabs li a.firstPanel, .nav-tabs li.active a.firstPanel, .nav-tabs li.active a.firstPanel:focus, .nav-tabs li.active a.firstPanel:hover
background: $lightBlue
&:hover
background: $lightBlueTrans
.secondPanel, .nav-tabs li a.secondPanel, .nav-tabs li.active a.secondPanel, .nav-tabs li.active a.secondPanel:focus, .nav-tabs li.active a.secondPanel:hover
background: $purple
&:hover
background: $purpleTrans
.thirdPanel, .nav-tabs li a.thirdPanel, .nav-tabs li.active a.thirdPanel, .nav-tabs li.active a.thirdPanel:focus, .nav-tabs li.active a.thirdPanel:hover
background: $orange
&:hover
background: $orangeTrans
.fourthPanel, .nav-tabs li a.fourthPanel, .nav-tabs li.active a.fourthPanel, .nav-tabs li.active a.fourthPanel:focus, .nav-tabs li.active a.fourthPanel:hover
background: $yellow
&:hover
background: $yellowTrans
.fifthPanel, .nav-tabs li a.fifthPanel, .nav-tabs li.active a.fifthPanel, .nav-tabs li.active a.fifthPanel:focus, .nav-tabs li.active a.fifthPanel:hover
background: $black
&:hover
background: $blackTrans
View Compiled
$('.tabAnchor').on('click', function() { // changes container bg to tab color stored in data attr
var destBg = $(this).data('color');
$('.tab-content').css('background', destBg);
});
$('.shifter').on('click', function(e) { // shifts tabs
e.preventDefault();
$('.tabToggle').toggleClass('hidden');
});
