title: Bootstrap nav-tabs , list of open tabs
body: <p>I have a list of tabs created using bootstrap and looking for how we can pull the list of open tabs titles using jQuery. Appreciate any helps.</p>
  
  <p>Below is the Full HTML
  .............................................................................</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
          &lt;title&gt;Test&lt;/title&gt;
  
          &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
          &lt;script src="Sortable.min.js"&gt;&lt;/script&gt;
          &lt;style type="text/css"&gt;
          #tab-list .close{
              margin-left: 7px;
          }
          &lt;/style&gt;
          &lt;script type="text/javascript"&gt;
              $(document).ready(function () {
                  var tabID = 1;
                  $('#btn-add-tab').click(function () {
                      tabID++;
                      $('#tab-list').append($('&lt;li&gt;&lt;a href="#tab' + tabID + '" role="tab" data-toggle="tab"&gt;Tab ' + tabID + '&lt;button class="close" type="button" title="Remove this page"&gt;Ã—&lt;/button&gt;&lt;/a&gt;&lt;/li&gt;'));
                      $('#tab-content').append($('&lt;div class="tab-pane fade" id="tab' + tabID + '"&gt;Tab '+ tabID +' content &lt;/div&gt;'));
                  });
  
                  $('#btn-show-tabs').click(function () {
                      alert('Tabs');
                  });
  
  
                  $('#tab-list').on('click','.close',function(){
                      var tabID = $(this).parents('a').attr('href');
                      $(this).parents('li').remove();
                      $(tabID).remove();
  
                      //display first tab
                      var tabFirst = $('#tab-list a:first');
                      tabFirst.tab('show');
                  });
  
                  var list = document.getElementById("tab-list");
                  new Sortable(list);
              });
              &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
              &lt;!-- Container Start --&gt;
              &lt;div class="container-fluid"&gt;
                  &lt;!-- Main Content Area Start --&gt;
                  &lt;div class="main-container"&gt;
                      &lt;!---  ---&gt;
                      &lt;div class="container"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-md-12"&gt;
                                  &lt;p&gt;
                                      &lt;button id="btn-add-tab" type="button" class="btn btn-primary"&gt;Add Tab&lt;/button&gt; &amp;nbsp
                                      &lt;button id="btn-show-tabs" type="button" class="btn btn-primary pull-right"&gt;Show Tabs&lt;/button&gt;&lt;br&gt;
                                  &lt;/p&gt;
                                  &lt;!-- Nav tabs --&gt;
                                  &lt;ul id="tab-list" class="nav nav-tabs" role="tablist"&gt;
                                      &lt;li class="active"&gt;&lt;a href="#tab1" role="tab" data-toggle="tab"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
  
                                  &lt;!-- Tab panes --&gt;
                                  &lt;div id="tab-content" class="tab-content"&gt;
                                      &lt;div class="tab-pane fade in active" id="tab1"&gt;
                                              Tab 1 content
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;!---  ---&gt;
                  &lt;/div&gt;
                  &lt;!-- Main Content Area End --&gt;
                  &lt;div class="clearfix"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- Container End --&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>