Bootstrap: How to create a tabbable nav with a tab

Question

I'm working with the example code from the bootstrap documentation.

<div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
</div>

I'm trying to recreate this with the ability to have a tab at the beginning of the nav labeled "All" and for that tab to show all the sections, but not sure how to go about it.

Answer 1

You could add the "All" tab like this..

<ul class="nav nav-tabs">
    <li><a id="tabAll">All</a></li>
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
    <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
</ul>

And them set all tab-pane to active when 'All' is clicked..

$('#tabAll').click(function(){
  $('#tabAll a').addClass('active');  
  $('.tab-pane').each(function(i,t){
    $('#myTabs li').removeClass('active'); 
    $(this).addClass('active');  
  });
});

Example: http://bootply.com/60331

This method also works for Bootstrap 3.