<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-xs-12 col-lg-9"> <div id="panelBox" class="panel panelBox panelFilter"> <div class="panel-heading"> <ul class="nav panelbox nav-tabs"> <li class="active"><a href="#tabFilters" data-toggle="tab">Filters</a></li> <li><a href="#tabResults" data-toggle="tab">Results</a></li> <li><a href="#tabMetrics" data-toggle="tab">Metrics</a></li> </ul> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane fade in active" id="tabFilters"> <h1>Filter Tab</h1> </div> <div class="tab-pane fade" id="tabResults"> <h1>Results Tab</h1> </div> <div class="tab-pane fade" id="tabMetrics"> <h1>Metrics Tab</h1> </div> </div> </div> </div> </div> </div> </div>

.panelbox.nav-tabs { border-color:transparent; } .panelbox.nav-tabs>.active>a ,.panelbox.nav-tabs>.active:hover>a ,.panelbox.nav-tabs a ,.panelbox.nav-tabs a:hover{ background-color:transparent!important; border-color:transparent!important; border-radius:0px!important; color:white!important; font-size:18px; } .panelFilter { border-color: #3D9970; -webkit-transition: border-color 4s ease-out; -moz-transition: border-color 4s ease-out; -o-transition: border-color 4s ease-out; transition: border-color 4s ease-out; } .panelFilter > .panel-heading { color: #ffffff; background-color: #3D9970; border-color: #3D9970; -webkit-transition: background-color 4s ease-out; -moz-transition: background-color 4s ease-out; -o-transition: background-color 4s ease-out; transition: background-color 4s ease-out; } .panelResults { border-color: #FF4136; -webkit-transition: border-color 4s ease-out; -moz-transition: border-color 4s ease-out; -o-transition: border-color 4s ease-out; transition: border-color 4s ease-out; } .panelResults > .panel-heading { color: #ffffff; background-color: #FF4136; border-color: #FF4136; -webkit-transition: background-color 4s ease-out; -moz-transition: background-color 4s ease-out; -o-transition: background-color 4s ease-out; transition: background-color 4s ease-out; } .panelMetrics { border-color: #0074D9; -webkit-transition: border-color 4s ease-out; -moz-transition: border-color 4s ease-out; -o-transition: border-color 4s ease-out; transition: border-color 4s ease-out; } .panelMetrics > .panel-heading { color: #ffffff; background-color: #0074D9; border-color: #0074D9; -webkit-transition: background-color 4s ease-out; -moz-transition: background-color 4s ease-out; -o-transition: background-color 4s ease-out; transition: background-color 4s ease-out; }

$(function() { $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { var target = $(e.target).attr("href") if (target == "#tabFilters") { $('#panelBox').removeClass(); $('#panelBox').addClass('panel panelBox panelFilter'); } if (target == "#tabResults") { $('#panelBox').removeClass(); $('#panelBox').addClass('panel panelBox panelResults'); } if (target == "#tabMetrics") { $('#panelBox').removeClass(); $('#panelBox').addClass('panel panelBox panelMetrics'); } }); });