Bootstrap nav-tabs dropdown-menu multi-column - html

Question

I'm trying to create a Bootstrap multi-column dropdown menu for nav-tabs. With the code below, I can select each tab. When I switch to another tab, I can't go back to the prior tab. It looks like all tabs remain active. How can I fix this?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-menu.multi-column {
width: 400px;
}
.dropdown-menu.multi-column .dropdown-menu {
display: block !important;
position: static !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
min-width:100px;
}
</style>
<ul class="nav nav-tabs" id="myTabs" role="tablist">
<li role="presentation" class="active">Summary Table</li>
<li class="dropdown"> States
<div class="dropdown-menu multi-column">
<div class="row">
<div class="col-md-6">
<ul class="dropdown-menu">
<li>Alabama</li>
<li>Alaska</li>
</ul>
</div>
<div class="col-md-6">
<ul class="dropdown-menu">
<li>Maine</li>
<li>Maryland</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
<div class="tab-content" id="myTabContent" style="color:black">
<div class="tab-pane fade in active" role="tabpanel" id="main" aria-labelledby="main-tab">
<table class="table table-striped table-hover table-bordered table-responsive" id="rates">
<thead>
<tr><th>State</th><th>Tax Rate</th></tr>
</thead>
<tbody>
<tr><td id="AL">Alabama</td><td id="AL_T">6.00%</td></tr>
<tr><td id="AK">Alaska</td><td id="AK_T">2.70%</td></tr>
<tr><td id="ME">Maine</td><td id="ME_T">3.00%</td></tr>
<tr><td id="MD">Maryland</td><td id="MD_T">3.00%</td></tr>
</tbody>
</table><br/>
</div>
<div class="tab-pane fade in" role="tabpanel" id="Alabama" aria-labelledby="Alabama-tab">
<h5><span style="text-decoration: underline;">Alabama </span></h5>
</div>
<div class="tab-pane fade in" role="tabpanel" id="Alaska" aria-labelledby="Alaska-tab">
<h5><span style="text-decoration: underline;">Alaska </span></h5>
</div>
<div class="tab-pane fade in" role="tabpanel" id="Maine" aria-labelledby="Maine-tab">
<h5><span style="text-decoration: underline;">Maine </span></h5>
</div>
<div class="tab-pane fade in" role="tabpanel" id="Maryland" aria-labelledby="Maryland-tab">
<h5><span style="text-decoration: underline;">Maryland </span></h5>
</div>
</div>

Answer 1

Add this to the bottom
<script type="text/javascript">
$(function() {
var active = $('a[data-toggle="tab"]').parents('.active').length;
var tabClicked = false;
// Closes current active tab (toggle and pane):
var close = function() {
$('a[data-toggle="tab"]').parent().removeClass('active');
$('.tab-pane.active').removeClass('active');
active = null;
}
// Closing active tab when clicking on toggle:
$('[data-toggle=tab]').click(function(){
if ($(this).parent().hasClass('active')){
$($(this).attr("href")).toggleClass('active');
active = null;
} else {
tabClicked = true;
active = this;
}
});
// Closing active tab when clicking outside tab context (toggle and pane):
$(document).on('click.bs.tab.data-api', function(event) {
if(active && !tabClicked && !$(event.target).closest('.tab-pane.active').length) {
close();
}
tabClicked = false;
});
// Closing active tab on ESC key release:
$(document).keyup(function(e){
if(active && e.keyCode === 27) { // ESC
close();
}
});
});
</script>
And a button before the last < / div >
Close active tab
I know that is not the best solution, but does the work and with a little bit of patience you can do it better.

Answer 2

The answer by #Filipe Amaral was 95% of what this problem needed. After a couple of modifications, it works like a charm.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.dropdown-menu li').click (function(){
$('.dropdown-menu li').removeClass('active')
});
$('#main-tab').click (function(){
$('.dropdown-menu li').removeClass('active')
});
});
$(function() {
var active = $('a[data-toggle="tab"]').parents('.active').length;
var tabClicked = false;
// Closes current active tab (toggle and pane):
var close = function() {
$('a[data-toggle="tab"]').parent().removeClass('active');
$('.tab-pane.active').removeClass('active');
active = null;
}
// Closing active tab when clicking on toggle:
$('[data-toggle=tab]').click(function(){
if ($(this).parent().hasClass('active')){
$($(this).attr("href")).toggleClass('active');
active = null;
} else {
tabClicked = true;
active = this;
}
});
// Closing active tab when clicking outside tab context (toggle and pane):
$(document).on('click.bs.tab.data-api', function(event) {
if(active && !tabClicked && !$(event.target).closest('.tab-pane.active').length) {
close();
}
tabClicked = false;
});
// Closing active tab on ESC key release:
$(document).keyup(function(e){
if(active && e.keyCode === 27) { // ESC
close();
}
});
});
</script>
<style>
.dropdown-menu.multi-column {
width: 400px;
}
.dropdown-menu.multi-column .dropdown-menu {
display: block !important;
position: static !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
min-width:100px;
}
</style>
<ul class="nav nav-tabs" id="myTabs" role="tablist">
<li role="presentation" class="active">Summary Table</li>
<li class="dropdown"> States
<div class="dropdown-menu multi-column">
<div class="row">
<div class="col-md-6">
<ul class="dropdown-menu">
<li>Alabama</li>
<li>Alaska</li>
</ul>
</div>
<div class="col-md-6">
<ul class="dropdown-menu">
<li>Maine</li>
<li>Maryland</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
<div class="tab-content" id="myTabContent" style="color:black">
<div class="tab-pane fade in active" role="tabpanel" id="main" aria-labelledby="main-tab">
<table class="table table-striped table-hover table-bordered table-responsive" id="rates">
<thead>
<tr><th>State</th><th>Tax Rate</th></tr>
</thead>
<tbody>
<tr><td id="AL">Alabama</td><td id="AL_T">6.00%</td></tr>
<tr><td id="AK">Alaska</td><td id="AK_T">2.70%</td></tr>
<tr><td id="ME">Maine</td><td id="ME_T">3.00%</td></tr>
<tr><td id="MD">Maryland</td><td id="MD_T">3.00%</td></tr>
</tbody>
</table><br/>
</div>
<div class="tab-pane fade in" role="tabpanel" id="Alabama" aria-labelledby="Alabama-tab">
<h5><span style="text-decoration: underline;">Alabama </span></h5>
</div>
<div class="tab-pane fade in" role="tabpanel" id="Alaska" aria-labelledby="Alaska-tab">
<h5><span style="text-decoration: underline;">Alaska </span></h5>
</div>
<div class="tab-pane fade in" role="tabpanel" id="Maine" aria-labelledby="Maine-tab">
<h5><span style="text-decoration: underline;">Maine </span></h5>
</div>
<div class="tab-pane fade in" role="tabpanel" id="Maryland" aria-labelledby="Maryland-tab">
<h5><span style="text-decoration: underline;">Maryland </span></h5>
</div>
</div>