<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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">
<h2>Tabbed Panels with optional Dropdown</h2>
<br>
<div class="row">
<div class="col-md-6">
<div class="panel tabbed-panel compact-panel panel-default">
<div class="panel-heading clearfix">
<div class="panel-title pull-left">Default Panel</div>
<div class="pull-right">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab-default-1" data-toggle="tab">Page 1</a></li>
<li><a href="#tab-default-2" data-toggle="tab">Page 2</a></li>
<li><a href="#tab-default-3" data-toggle="tab">Page 3</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">More <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#tab-default-4" data-toggle="tab">Page 4</a></li>
<li><a href="#tab-default-5" data-toggle="tab">Page 5</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab-default-1">Page 1</div>
<div class="tab-pane fade" id="tab-default-2">Page 2</div>
<div class="tab-pane fade" id="tab-default-3">Page 3</div>
<div class="tab-pane fade" id="tab-default-4">Page 4</div>
<div class="tab-pane fade" id="tab-default-5">Page 5</div>
</div>
</div>
</div>
<!-- /.panel -->
</div>
<!-- /.col-md-6 -->
<div class="col-md-6">
<div class="panel tabbed-panel compact-panel panel-primary">
<div class="panel-heading clearfix">
<div class="panel-title pull-left">Primary Panel</div>
<div class="pull-right">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab-primary-1" data-toggle="tab">Page 1</a></li>
<li><a href="#tab-primary-2" data-toggle="tab">Page 2</a></li>
<li><a href="#tab-primary-3" data-toggle="tab">Page 3</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">More <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#tab-primary-4" data-toggle="tab">Page 4</a></li>
<li><a href="#tab-primary-5" data-toggle="tab">Page 5</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab-primary-1">Page 1</div>
<div class="tab-pane fade" id="tab-primary-2">Page 2</div>
<div class="tab-pane fade" id="tab-primary-3">Page 3</div>
<div class="tab-pane fade" id="tab-primary-4">Page 4</div>
<div class="tab-pane fade" id="tab-primary-5">Page 5</div>
</div>
</div>
</div>
<!-- /.panel -->
</div>
<!-- /.col-md-6 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-md-6">
<div class="panel tabbed-panel compact-panel panel-info">
<div class="panel-heading clearfix">
<div class="panel-title pull-left">Info Panel</div>
<div class="pull-right">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab-info-1" data-toggle="tab">Page 1</a></li>
<li><a href="#tab-info-2" data-toggle="tab">Page 2</a></li>
<li><a href="#tab-info-3" data-toggle="tab">Page 3</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">More <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#tab-info-4" data-toggle="tab">Page 4</a></li>
<li><a href="#tab-info-5" data-toggle="tab">Page 5</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab-info-1">Page 1</div>
<div class="tab-pane fade" id="tab-info-2">Page 2</div>
<div class="tab-pane fade" id="tab-info-3">Page 3</div>
<div class="tab-pane fade" id="tab-info-4">Page 4</div>
<div class="tab-pane fade" id="tab-info-5">Page 5</div>
</div>
</div>
</div>
<!-- /.panel -->
</div>
<!-- /.col-md-6 -->
<div class="col-md-6">
<div class="panel tabbed-panel compact-panel panel-success">
<div class="panel-heading clearfix">
<div class="panel-title pull-left">Success Panel</div>
<div class="pull-right">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab-success-1" data-toggle="tab">Page 1</a></li>
<li><a href="#tab-success-2" data-toggle="tab">Page 2</a></li>
<li><a href="#tab-success-3" data-toggle="tab">Page 3</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">More <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#tab-success-4" data-toggle="tab">Page 4</a></li>
<li><a href="#tab-success-5" data-toggle="tab">Page 5</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab-success-1">Page 1</div>
<div class="tab-pane fade" id="tab-success-2">Page 2</div>
<div class="tab-pane fade" id="tab-success-3">Page 3</div>
<div class="tab-pane fade" id="tab-success-4">Page 4</div>
<div class="tab-pane fade" id="tab-success-5">Page 5</div>
</div>
</div>
</div>
<!-- /.panel -->
</div>
<!-- /.col-md-6 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-md-6">
<div class="panel tabbed-panel compact-panel panel-warning">
<div class="panel-heading clearfix">
<div class="panel-title pull-left">Warning Panel</div>
<div class="pull-right">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab-warning-1" data-toggle="tab">Page 1</a></li>
<li><a href="#tab-warning-2" data-toggle="tab">Page 2</a></li>
<li><a href="#tab-warning-3" data-toggle="tab">Page 3</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">More <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#tab-warning-4" data-toggle="tab">Page 4</a></li>
<li><a href="#tab-warning-5" data-toggle="tab">Page 5</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab-warning-1">Page 1</div>
<div class="tab-pane fade" id="tab-warning-2">Page 2</div>
<div class="tab-pane fade" id="tab-warning-3">Page 3</div>
<div class="tab-pane fade" id="tab-warning-4">Page 4</div>
<div class="tab-pane fade" id="tab-warning-5">Page 5</div>
</div>
</div>
</div>
<!-- /.panel -->
</div>
<!-- /.col-md-6 -->
<div class="col-md-6">
<div class="panel tabbed-panel compact-panel panel-danger">
<div class="panel-heading clearfix">
<div class="panel-title pull-left">Danger Panel</div>
<div class="pull-right">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab-danger-1" data-toggle="tab">Page 1</a></li>
<li><a href="#tab-danger-2" data-toggle="tab">Page 2</a></li>
<li><a href="#tab-danger-3" data-toggle="tab">Page 3</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">More <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#tab-danger-4" data-toggle="tab">Page 4</a></li>
<li><a href="#tab-danger-5" data-toggle="tab">Page 5</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab-danger-1">Page 1</div>
<div class="tab-pane fade" id="tab-danger-2">Page 2</div>
<div class="tab-pane fade" id="tab-danger-3">Page 3</div>
<div class="tab-pane fade" id="tab-danger-4">Page 4</div>
<div class="tab-pane fade" id="tab-danger-5">Page 5</div>
</div>
</div>
</div>
<!-- /.panel -->
</div>
<!-- /.col-md-6 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-md-12">
<div class="panel tabbed-panel panel-default">
<div class="panel-heading clearfix">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1primary" data-toggle="tab">Page 1</a></li>
<li><a href="#tab2primary" data-toggle="tab">Page 2</a></li>
<li><a href="#tab3primary" data-toggle="tab">Page 3</a></li>
<li><a href="#tab4primary" data-toggle="tab">Page 4</a></li>
<li><a href="#tab5primary" data-toggle="tab">Page 5</a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1primary">
<p>Page 1</p>
<div class="row">
<div class="col-lg-12">
<div class="pull-right">
<button class="btn btn-default next-tab" type="button"><span class="glyphicon glyphicon-chevron-right"></span> Next</button>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab2primary">
<p>Page 2</p>
<div class="row">
<div class="col-lg-12">
<div class="pull-right">
<button class="btn btn-default previous-tab" type="button"><span class="glyphicon glyphicon-chevron-left"></span> Previous</button>
<button class="btn btn-default next-tab" type="button"><span class="glyphicon glyphicon-chevron-right"></span> Next</button>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab3primary">
<p>Page 3</p>
<div class="row">
<div class="col-lg-12">
<div class="pull-right">
<button class="btn btn-default previous-tab" type="button"><span class="glyphicon glyphicon-chevron-left"></span> Previous</button>
<button class="btn btn-default next-tab" type="button"><span class="glyphicon glyphicon-chevron-right"></span> Next</button>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab4primary">
<p>Page 4</p>
<div class="row">
<div class="col-lg-12">
<div class="pull-right">
<button class="btn btn-default previous-tab" type="button"><span class="glyphicon glyphicon-chevron-left"></span> Previous</button>
<button class="btn btn-default next-tab" type="button"><span class="glyphicon glyphicon-chevron-right"></span> Next</button>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab5primary">
<p>Page 5</p>
<div class="row">
<div class="col-lg-12">
<div class="pull-right">
<button class="btn btn-default previous-tab" type="button"><span class="glyphicon glyphicon-chevron-left"></span> Previous</button>
<button class="btn btn-primary" type="submit"><span class="glyphicon glyphicon-ok-sign"></span> Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.panel -->
</div>
<!-- /.col-md-12 -->
</div>
<!-- /.row -->
</div>
.panel.tabbed-panel .panel-heading{
padding: 5px 5px 0;
}
.panel.tabbed-panel .panel-heading .panel-title{
padding: 9px 10px;
}
.panel.tabbed-panel.compact-panel .panel-heading .panel-title{
font-size: 1em;
line-height: 1em;
}
.panel.tabbed-panel .nav-tabs{
border-bottom: none;
}
.panel.tabbed-panel.compact-panel .nav-tabs > li > a{
line-height: 1em;
border-bottom: 0;
}
.panel.tabbed-panel .nav-justified{
margin-bottom: -1px;
}
.tabbed-panel.panel-default .nav-tabs > li > a,
.tabbed-panel.panel-default .nav-tabs > li > a:hover,
.tabbed-panel.panel-default .nav-tabs > li > a:focus {
color: #777;
}
.tabbed-panel.panel-default .nav-tabs > .open > a,
.tabbed-panel.panel-default .nav-tabs > .open > a:hover,
.tabbed-panel.panel-default .nav-tabs > .open > a:focus,
.tabbed-panel.panel-default .nav-tabs > li > a:hover,
.tabbed-panel.panel-default .nav-tabs > li > a:focus {
color: #777;
background-color: #ddd;
border-color: transparent;
}
.tabbed-panel.panel-default .nav-tabs > li.active > a,
.tabbed-panel.panel-default .nav-tabs > li.active > a:hover,
.tabbed-panel.panel-default .nav-tabs > li.active > a:focus {
color: #555;
background-color: #fff;
border-color: #ddd;
border-bottom-color: transparent;
}
.tabbed-panel.panel-default .nav-tabs > li.dropdown .dropdown-menu {
background-color: #f5f5f5;
border-color: #ddd;
}
.tabbed-panel.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #777;
}
.tabbed-panel.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.tabbed-panel.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #ddd;
}
.tabbed-panel.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.tabbed-panel.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.tabbed-panel.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
color: #fff;
background-color: #555;
}
.tabbed-panel.panel-primary .nav-tabs > li > a,
.tabbed-panel.panel-primary .nav-tabs > li > a:hover,
.tabbed-panel.panel-primary .nav-tabs > li > a:focus {
color: #fff;
}
.tabbed-panel.panel-primary .nav-tabs > .open > a,
.tabbed-panel.panel-primary .nav-tabs > .open > a:hover,
.tabbed-panel.panel-primary .nav-tabs > .open > a:focus,
.tabbed-panel.panel-primary .nav-tabs > li > a:hover,
.tabbed-panel.panel-primary .nav-tabs > li > a:focus {
color: #fff;
background-color: #3071a9;
border-color: transparent;
}
.tabbed-panel.panel-primary .nav-tabs > li.active > a,
.tabbed-panel.panel-primary .nav-tabs > li.active > a:hover,
.tabbed-panel.panel-primary .nav-tabs > li.active > a:focus {
color: #428bca;
background-color: #fff;
border-color: #428bca;
border-bottom-color: transparent;
}
.tabbed-panel.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
background-color: #428bca;
border-color: #3071a9;
}
.tabbed-panel.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #fff;
}
.tabbed-panel.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.tabbed-panel.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #3071a9;
}
.tabbed-panel.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.tabbed-panel.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.tabbed-panel.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
background-color: #4a9fe9;
}
.tabbed-panel.panel-success .nav-tabs > li > a,
.tabbed-panel.panel-success .nav-tabs > li > a:hover,
.tabbed-panel.panel-success .nav-tabs > li > a:focus {
color: #3c763d;
}
.tabbed-panel.panel-success .nav-tabs > .open > a,
.tabbed-panel.panel-success .nav-tabs > .open > a:hover,
.tabbed-panel.panel-success .nav-tabs > .open > a:focus,
.tabbed-panel.panel-success .nav-tabs > li > a:hover,
.tabbed-panel.panel-success .nav-tabs > li > a:focus {
color: #3c763d;
background-color: #d6e9c6;
border-color: transparent;
}
.tabbed-panel.panel-success .nav-tabs > li.active > a,
.tabbed-panel.panel-success .nav-tabs > li.active > a:hover,
.tabbed-panel.panel-success .nav-tabs > li.active > a:focus {
color: #3c763d;
background-color: #fff;
border-color: #d6e9c6;
border-bottom-color: transparent;
}
.tabbed-panel.panel-success .nav-tabs > li.dropdown .dropdown-menu {
background-color: #dff0d8;
border-color: #d6e9c6;
}
.tabbed-panel.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #3c763d;
}
.tabbed-panel.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.tabbed-panel.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #d6e9c6;
}
.tabbed-panel.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.tabbed-panel.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.tabbed-panel.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
color: #fff;
background-color: #3c763d;
}
.tabbed-panel.panel-info .nav-tabs > li > a,
.tabbed-panel.panel-info .nav-tabs > li > a:hover,
.tabbed-panel.panel-info .nav-tabs > li > a:focus {
color: #31708f;
}
.tabbed-panel.panel-info .nav-tabs > .open > a,
.tabbed-panel.panel-info .nav-tabs > .open > a:hover,
.tabbed-panel.panel-info .nav-tabs > .open > a:focus,
.tabbed-panel.panel-info .nav-tabs > li > a:hover,
.tabbed-panel.panel-info .nav-tabs > li > a:focus {
color: #31708f;
background-color: #bce8f1;
border-color: transparent;
}
.tabbed-panel.panel-info .nav-tabs > li.active > a,
.tabbed-panel.panel-info .nav-tabs > li.active > a:hover,
.tabbed-panel.panel-info .nav-tabs > li.active > a:focus {
color: #31708f;
background-color: #fff;
border-color: #bce8f1;
border-bottom-color: transparent;
}
.tabbed-panel.panel-info .nav-tabs > li.dropdown .dropdown-menu {
background-color: #d9edf7;
border-color: #bce8f1;
}
.tabbed-panel.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #31708f;
}
.tabbed-panel.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.tabbed-panel.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #bce8f1;
}
.tabbed-panel.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.tabbed-panel.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.tabbed-panel.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
color: #fff;
background-color: #31708f;
}
.tabbed-panel.panel-warning .nav-tabs > li > a,
.tabbed-panel.panel-warning .nav-tabs > li > a:hover,
.tabbed-panel.panel-warning .nav-tabs > li > a:focus {
color: #8a6d3b;
}
.tabbed-panel.panel-warning .nav-tabs > .open > a,
.tabbed-panel.panel-warning .nav-tabs > .open > a:hover,
.tabbed-panel.panel-warning .nav-tabs > .open > a:focus,
.tabbed-panel.panel-warning .nav-tabs > li > a:hover,
.tabbed-panel.panel-warning .nav-tabs > li > a:focus {
color: #8a6d3b;
background-color: #faebcc;
border-color: transparent;
}
.tabbed-panel.panel-warning .nav-tabs > li.active > a,
.tabbed-panel.panel-warning .nav-tabs > li.active > a:hover,
.tabbed-panel.panel-warning .nav-tabs > li.active > a:focus {
color: #8a6d3b;
background-color: #fff;
border-color: #faebcc;
border-bottom-color: transparent;
}
.tabbed-panel.panel-warning .nav-tabs > li.dropdown .dropdown-menu {
background-color: #fcf8e3;
border-color: #faebcc;
}
.tabbed-panel.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #8a6d3b;
}
.tabbed-panel.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.tabbed-panel.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #faebcc;
}
.tabbed-panel.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.tabbed-panel.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.tabbed-panel.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
color: #fff;
background-color: #8a6d3b;
}
.tabbed-panel.panel-danger .nav-tabs > li > a,
.tabbed-panel.panel-danger .nav-tabs > li > a:hover,
.tabbed-panel.panel-danger .nav-tabs > li > a:focus {
color: #a94442;
}
.tabbed-panel.panel-danger .nav-tabs > .open > a,
.tabbed-panel.panel-danger .nav-tabs > .open > a:hover,
.tabbed-panel.panel-danger .nav-tabs > .open > a:focus,
.tabbed-panel.panel-danger .nav-tabs > li > a:hover,
.tabbed-panel.panel-danger .nav-tabs > li > a:focus {
color: #a94442;
background-color: #ebccd1;
border-color: transparent;
}
.tabbed-panel.panel-danger .nav-tabs > li.active > a,
.tabbed-panel.panel-danger .nav-tabs > li.active > a:hover,
.tabbed-panel.panel-danger .nav-tabs > li.active > a:focus {
color: #a94442;
background-color: #fff;
border-color: #ebccd1;
border-bottom-color: transparent;
}
.tabbed-panel.panel-danger .nav-tabs > li.dropdown .dropdown-menu {
background-color: #f2dede; /* bg color */
border-color: #ebccd1; /* border color */
}
.tabbed-panel.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #a94442; /* normal text color */
}
.tabbed-panel.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.tabbed-panel.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #ebccd1; /* hover bg color */
}
.tabbed-panel.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.tabbed-panel.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.tabbed-panel.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
color: #fff; /* active text color */
background-color: #a94442; /* active bg color */
}
$(function(){
$('.nav-tabs a:first',this.$page).tab('show')
$('.nav-tabs li:gt(0)',this.$page).each(function(){
$(this).addClass('disabled');
$('a',$(this)).attr('data-toggle','');
});
$('.next-tab').on('click',function(){
var $panel = $(this).closest('.panel');
var $tabs = $('.nav-tabs li',$panel);
var $tab = $('.nav-tabs li.active',$panel);
var index = $tabs.index($tab);
if (index < 0) {
return; //no hope for you!
}
index++;
var $next_tab = $('a',$tabs.eq(index));
if (!$next_tab.length) {
return;
}
$next_tab.parents('li').removeClass('disabled');
$next_tab.attr('data-toggle','tab');
$next_tab.tab('show');
});
$('.previous-tab').on('click',function(){
var $panel = $(this).closest('.panel');
var $tabs = $('.nav-tabs li',$panel);
var $tab = $('.nav-tabs li.active',$panel);
var index = $tabs.index($tab);
if (index < 0) {
return; //no hope for you!
}
index--;
var $previous_tab = $('a',$tabs.eq(index));
if (!$previous_tab.length) {
return;
}
$previous_tab.parents('li').removeClass('disabled');
$previous_tab.data('toggle','tab');
$previous_tab.tab('show');
});
});
