title: Getting Bootstrap 3 Tab Panes to Work with TreeView
body: <p>I am trying to get the TreeView from BootSnipp here: <a href="http://bootsnipp.com/snippets/featured/bootstrap-30-treeview" rel="nofollow">1</a> to work with Bootstrap 3 tabs.</p>
  
  <p>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:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// ***************** 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("&lt;i class='indicator glyphicon glyphicon-plus-sign'&gt;&lt;/i&gt;");
          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 *****************</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-7"&gt;
        &lt;ul id="tabs" class="tree"&gt;
          &lt;li&gt;&lt;a href="#panel-continent-overview" data-target="#panel-continent-overview" role="tab" data-toggle="tab"&gt;Continent Overview&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li&gt;&lt;a href="#"&gt;Countries&lt;/a&gt;
            &lt;ul&gt;
  
              &lt;li&gt;&lt;a href="#"&gt;Country 1&lt;/a&gt;
                &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#panel-country-9400470e-fa49-46ea-b587-2ceb108600c0" data-target="#panel-country-9400470e-fa49-46ea-b587-2ceb108600c0" role="tab" data-toggle="tab"&gt;Country Overview&lt;/a&gt;
                  &lt;/li&gt;
  
  
  
  
                &lt;/ul&gt;
              &lt;/li&gt;
  
              &lt;li&gt;&lt;a href="#"&gt;Country 2&lt;/a&gt;
                &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#panel-country-45f97844-9773-4059-bafd-a2782fc06db1" data-target="#panel-country-45f97844-9773-4059-bafd-a2782fc06db1" role="tab" data-toggle="tab"&gt;Country Overview&lt;/a&gt;
                  &lt;/li&gt;
  
  
                  &lt;li&gt;&lt;a href="#"&gt;Cities&lt;/a&gt;
                    &lt;ul&gt;
  
                      &lt;li&gt;&lt;a href="#panel-city-2120d7aa-2b93-4d0d-a42b-8c6fedc9333a" data-target="#panel-city-2120d7aa-2b93-4d0d-a42b-8c6fedc9333a" role="tab" data-toggle="tab"&gt;City P&lt;/a&gt;
                      &lt;/li&gt;
  
  
                    &lt;/ul&gt;
                  &lt;/li&gt;
  
  
  
                &lt;/ul&gt;
              &lt;/li&gt;
  
            &lt;/ul&gt;
          &lt;/li&gt;
  
          &lt;li&gt;&lt;a href="#"&gt;Cities&lt;/a&gt;
            &lt;ul&gt;
  
              &lt;li&gt;
                &lt;a href="#"&gt;City A&lt;/a&gt;
                &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#panel-city-b4a991ce-80ef-4406-b1d2-9892c0d93d18" data-target="#panel-city-b4a991ce-80ef-4406-b1d2-9892c0d93d18" role="tab" data-toggle="tab"&gt;Overview&lt;/a&gt;
  
                  &lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
  
              &lt;li&gt;
                &lt;a href="#"&gt;City B&lt;/a&gt;
                &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#panel-city-2e6f1227-66d0-4061-9243-bf6cf4feaabd" data-target="#panel-city-2e6f1227-66d0-4061-9243-bf6cf4feaabd" role="tab" data-toggle="tab"&gt;Overview&lt;/a&gt;
  
                    &lt;li&gt;&lt;a href="#"&gt;Neighborhoods&lt;/a&gt;
                      &lt;ul&gt;
  
                        &lt;li&gt;&lt;a href="#panel-neighborhood-f3fd5e2f-583d-4ccb-b163-03e118896f71" data-target="#panel-neighborhood-f3fd5e2f-583d-4ccb-b163-03e118896f71" role="tab" data-toggle="tab"&gt;Neighborhood X&lt;/a&gt;
                        &lt;/li&gt;
  
                      &lt;/ul&gt;
                    &lt;/li&gt;
  
                  &lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
  
            &lt;/ul&gt;
          &lt;/li&gt;
  
          &lt;li&gt;&lt;a href="#"&gt;Neighborhoods&lt;/a&gt;
            &lt;ul&gt;
  
              &lt;li&gt;&lt;a href="#panel-neighborhood-319d56ac-286f-4afa-af42-5ec74bbcac19" data-target="#panel-neighborhood-319d56ac-286f-4afa-af42-5ec74bbcac19" role="tab" data-toggle="tab"&gt;Neighborhood T&lt;/a&gt;
              &lt;/li&gt;
  
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div class="col-xs-5"&gt;
        &lt;div class="tabbable" id="tabbable-proj"&gt;
  
          &lt;div class="tab-content main-tab-content"&gt;
            &lt;div class="tab-pane fade in active" id="panel-continent-overview"&gt;
              &lt;strong&gt;Continent Details&lt;/strong&gt;
            &lt;/div&gt;
  
            &lt;div class="tab-pane fade" id="panel-country-9400470e-fa49-46ea-b587-2ceb108600c0"&gt;
              &lt;strong&gt;Country Details&lt;/strong&gt;
            &lt;/div&gt;
  
            &lt;div class="tab-pane fade" id="panel-country-45f97844-9773-4059-bafd-a2782fc06db1"&gt;
              &lt;strong&gt;Country Details&lt;/strong&gt;
            &lt;/div&gt;
  
            &lt;div class="tab-pane fade" id="panel-city-2120d7aa-2b93-4d0d-a42b-8c6fedc9333a"&gt;
              &lt;strong&gt;City Details&lt;/strong&gt;
            &lt;/div&gt;
  
            &lt;div class="tab-pane fade" id="panel-neighborhood-babea547-cfb6-4e12-8c4a-bbbb25068d8a"&gt;
              &lt;strong&gt;Neighborhood Details&lt;/strong&gt;
            &lt;/div&gt;
  
            &lt;div class="tab-pane fade" id="panel-city-b4a991ce-80ef-4406-b1d2-9892c0d93d18"&gt;
              &lt;strong&gt;City Details&lt;/strong&gt;
            &lt;/div&gt;
  
            &lt;div class="tab-pane fade" id="panel-city-2e6f1227-66d0-4061-9243-bf6cf4feaabd"&gt;
              &lt;strong&gt;City Details&lt;/strong&gt;
            &lt;/div&gt;
  
            &lt;div class="tab-pane fade" id="panel-neighborhood-f3fd5e2f-583d-4ccb-b163-03e118896f71"&gt;
              &lt;strong&gt;Neighborhood Details&lt;/strong&gt;
            &lt;/div&gt;
  
            &lt;div class="tab-pane fade" id="panel-neighborhood-319d56ac-286f-4afa-af42-5ec74bbcac19"&gt;
              &lt;strong&gt;Neighborhood Details&lt;/strong&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am totally at a loss as to what is causing the problem. Could someone please help me with flushing out the bug? </p>