Getting Bootstrap 3 Tab Panes to Work with TreeView - twitter-bootstrap-3

Question

I am trying to get the TreeView from BootSnipp here: 1 to work with Bootstrap 3 tabs.
It works as expected initially, but breaks down after a few clicks, then responding/not responding arbitrarily. Here's the html+js+css I am working with:
// ***************** BEGIN TREE JS *****************
$.fn.extend({
treed: function() {
return this.each(function() {
//initialize each of the top levels
var tree = $(this);
tree.addClass("tree");
tree.find('li').has("ul").each(function() {
var branch = $(this); //li with children ul
branch.prepend("<i class='indicator glyphicon glyphicon-plus-sign'></i>");
branch.addClass('branch');
branch.on('click', function(e) {
if (this == e.target) {
var icon = $(this).children('i:first');
icon.toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
$(this).children().children().toggle();
}
})
branch.children().children().toggle();
});
//fire event from the dynamically added icon
$('.branch .indicator').on('click', function() {
$(this).closest('li').click();
});
//fire event to open branch if the li contains an anchor instead of text
$('.branch a').on('click', function(e) {
$(this).closest('li').click();
e.preventDefault();
});
//fire event to open branch if the li contains a button instead of text
$('.branch button').on('click', function(e) {
$(this).closest('li').click();
e.preventDefault();
});
});
}
});
$('.tree').treed();
//***************** END TREE JS *****************
/*BEGIN TREE CSS*/
.tree,
.tree ul {
margin: 0;
padding: 0;
list-style: none
}
.tree ul {
margin-left: 1em;
position: relative
}
.tree ul ul {
margin-left: .5em
}
.tree ul:before {
content: "";
display: block;
width: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
border-left: 1px solid
}
.tree li {
margin: 0;
padding: 0 1em;
line-height: 2em;
color: #369;
font-weight: 700;
position: relative
}
.tree ul li:before {
content: "";
display: block;
width: 10px;
height: 0;
border-top: 1px solid;
margin-top: -1px;
position: absolute;
top: 1em;
left: 0
}
.tree ul li:last-child:before {
background: #fff;
height: auto;
top: 1em;
bottom: 0
}
.indicator {
margin-right: 5px;
}
.tree li a {
text-decoration: none;
color: #369;
}
.tree li button,
.tree li button:active,
.tree li button:focus {
text-decoration: none;
color: #369;
border: none;
background: transparent;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
outline: 0;
}
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-7">
<ul id="tabs" class="tree">
<li>Continent Overview
</li>
<li>Countries
<ul>
<li>Country 1
<ul>
<li>Country Overview
</li>
</ul>
</li>
<li>Country 2
<ul>
<li>Country Overview
</li>
<li>Cities
<ul>
<li>City P
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Cities
<ul>
<li>
City A
<ul>
<li>Overview
</li>
</ul>
</li>
<li>
City B
<ul>
<li>Overview
<li>Neighborhoods
<ul>
<li>Neighborhood X
</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
</li>
<li>Neighborhoods
<ul>
<li>Neighborhood T
</li>
</ul>
</li>
</ul>
</div>
<div class="col-xs-5">
<div class="tabbable" id="tabbable-proj">
<div class="tab-content main-tab-content">
<div class="tab-pane fade in active" id="panel-continent-overview">
<strong>Continent Details</strong>
</div>
<div class="tab-pane fade" id="panel-country-9400470e-fa49-46ea-b587-2ceb108600c0">
<strong>Country Details</strong>
</div>
<div class="tab-pane fade" id="panel-country-45f97844-9773-4059-bafd-a2782fc06db1">
<strong>Country Details</strong>
</div>
<div class="tab-pane fade" id="panel-city-2120d7aa-2b93-4d0d-a42b-8c6fedc9333a">
<strong>City Details</strong>
</div>
<div class="tab-pane fade" id="panel-neighborhood-babea547-cfb6-4e12-8c4a-bbbb25068d8a">
<strong>Neighborhood Details</strong>
</div>
<div class="tab-pane fade" id="panel-city-b4a991ce-80ef-4406-b1d2-9892c0d93d18">
<strong>City Details</strong>
</div>
<div class="tab-pane fade" id="panel-city-2e6f1227-66d0-4061-9243-bf6cf4feaabd">
<strong>City Details</strong>
</div>
<div class="tab-pane fade" id="panel-neighborhood-f3fd5e2f-583d-4ccb-b163-03e118896f71">
<strong>Neighborhood Details</strong>
</div>
<div class="tab-pane fade" id="panel-neighborhood-319d56ac-286f-4afa-af42-5ec74bbcac19">
<strong>Neighborhood Details</strong>
</div>
</div>
</div>
</div>
</div>
</div>
I am totally at a loss as to what is causing the problem. Could someone please help me with flushing out the bug?

Answer 1

Okay, I will attempt it myself.
It was not working because Bootstrap expects the tabs to be one flat ul - and I had multiple nested uls.
I got it working by
dissociating the tree from the tabbable;
creating a hidden flat ul for tabs; and
hooking the relevant tree anchor clicks to manually call $('...).tab('show') on the respective tab.
I have also discovered that using this strategy, I can call up my tabs from anywhere on the page - e.g. from a breadcrumb or a random anchor.
Now I know my question was too noobish for most people out there to tackle - the html itself was all over the place.
The answer I have been able to work out looks slightly hackish. Will somebody at least comment as to how good or bad it is? Like, will it incur search engine penalties for hiding the ul? What will the implications for accessibility be - especially as I have removed text from the anchor tags?
Or should I post one or more new questions to solicit this kind of feedback?
Cheers
// ***************** BEGIN TREE JS *****************
$.fn.extend({
treed: function() {
return this.each(function() {
//initialize each of the top levels
var tree = $(this);
tree.addClass("tree");
tree.find('li').has("ul").each(function() {
var branch = $(this); //li with children ul
branch.prepend("<i class='indicator glyphicon glyphicon-plus-sign'></i>");
branch.addClass('branch');
branch.on('click', function(e) {
if (this == e.target) {
var icon = $(this).children('i:first');
icon.toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
$(this).children().children().toggle();
}
})
branch.children().children().toggle();
});
//fire event from the dynamically added icon
$('.branch .indicator').on('click', function() {
$(this).closest('li').click();
});
//fire event to open branch if the li contains an anchor instead of text
$('.branch a').on('click', function(e) {
$(this).closest('li').click();
e.preventDefault();
});
//fire event to open branch if the li contains a button instead of text
$('.branch button').on('click', function(e) {
$(this).closest('li').click();
e.preventDefault();
});
});
}
});
$('.tree').treed();
//***************** END TREE JS *****************
$(document).ready(function() {
$("a.tree-link").on('click', function (event) {
var hrefTab = $(this).attr('href');
$('#hidden-tabs a[href='+hrefTab+']').tab('show');
});
});
#hidden-tabs{
height: 0px;
list-style-type: none;
padding:0;
margin:0;
}
#hidden-tabs{
height: 0px;
list-style-type: none;
padding:0;
margin:0;
}
#hidden-tabs li{
height: 0px;
padding:0;
margin:0;
}
#hidden-tabs li a{
height: 0px;
padding:0;
margin:0;
}
/*BEGIN TREE CSS*/
.tree,
.tree ul {
margin: 0;
padding: 0;
list-style: none
}
.tree ul {
margin-left: 1em;
position: relative
}
.tree ul ul {
margin-left: .5em
}
.tree ul:before {
content: "";
display: block;
width: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
border-left: 1px solid
}
.tree li {
margin: 0;
padding: 0 1em;
line-height: 2em;
color: #369;
font-weight: 700;
position: relative
}
.tree ul li:before {
content: "";
display: block;
width: 10px;
height: 0;
border-top: 1px solid;
margin-top: -1px;
position: absolute;
top: 1em;
left: 0
}
.tree ul li:last-child:before {
background: #fff;
height: auto;
top: 1em;
bottom: 0
}
.indicator {
margin-right: 5px;
}
.tree li a {
text-decoration: none;
color: #369;
}
.tree li button,
.tree li button:active,
.tree li button:focus {
text-decoration: none;
color: #369;
border: none;
background: transparent;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
outline: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-7">
<ul class="tree">
<li>Continent Overview
</li>
<li>Countries
<ul>
<li>Country 1
<ul>
<li>Country Overview
</li>
</ul>
</li>
<li>Country 2
<ul>
<li>Country Overview
</li>
<li>Cities
<ul>
<li>City P
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Cities
<ul>
<li>
City A
<ul>
<li>Overview
</li>
</ul>
</li>
<li>
City B
<ul>
<li>Overview
<li>Neighborhoods
<ul>
<li>Neighborhood X
</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
</li>
<li>Neighborhoods
<ul>
<li>Neighborhood T
</li>
</ul>
</li>
</ul>
</div>
<div class="col-xs-5">
<div class="tabbable" id="tabbable-proj">
<ul id="hidden-tabs" role="tablist" aria-expanded="false">
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
<div class="tab-content main-tab-content">
<div class="tab-pane fade in active" id="panel-continent-overview">
<strong>Continent Details</strong>
</div>
<div class="tab-pane fade" id="panel-country-9400470e-fa49-46ea-b587-2ceb108600c0">
<strong>Country 1 Details</strong>
</div>
<div class="tab-pane fade" id="panel-country-45f97844-9773-4059-bafd-a2782fc06db1">
<strong>Country 2 Details</strong>
</div>
<div class="tab-pane fade" id="panel-city-2120d7aa-2b93-4d0d-a42b-8c6fedc9333a">
<strong>City P Details</strong>
</div>
<div class="tab-pane fade" id="panel-neighborhood-babea547-cfb6-4e12-8c4a-bbbb25068d8a">
<strong>Neighborhood Details</strong>
</div>
<div class="tab-pane fade" id="panel-city-b4a991ce-80ef-4406-b1d2-9892c0d93d18">
<strong>City A Details</strong>
</div>
<div class="tab-pane fade" id="panel-city-2e6f1227-66d0-4061-9243-bf6cf4feaabd">
<strong>City B Details</strong>
</div>
<div class="tab-pane fade" id="panel-neighborhood-f3fd5e2f-583d-4ccb-b163-03e118896f71">
<strong>Neighborhood X Details</strong>
</div>
<div class="tab-pane fade" id="panel-neighborhood-319d56ac-286f-4afa-af42-5ec74bbcac19">
<strong>Neighborhood T Details</strong>
</div>
</div>
</div>
</div>
</div>
</div>