Bootstrap 3 - Extra Tab Panel

by Kyle Mitofsky

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<button class="btn btn-lg btn-primary" id="launchExtra">
    Launch Extra
</button>
<br/><br/>

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="myTab">
  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
  <li class="hidden"><a href="#extra" role="tab" data-toggle="tab" >Extra</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">Home</div>
  <div class="tab-pane" id="profile">Profile</div>
  <div class="tab-pane" id="messages">Messages</div>
  <div class="tab-pane" id="settings">Settings</div>
  <div class="tab-pane" id='extra'>Extras</div>

</div>







<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
    About this SO Question:
    <a href='http://stackoverflow.com/q/25699332/1366033'>
        Bootstrap toggleable tabs without having tab links
    </a><br/>
    Fork This Skeleton Here: 
    <a href='http://jsfiddle.net/KyleMit/kcpma/'>
        Bootstrap 3 Skeleton
    </a><br/>
</div>

CSS

hidden {
    display: none;
}

JavaScript

$("#launchExtra").click(function() {
    $('#myTab a[href="#extra"]').tab('show')
});