JSFiddle - React, Tailwind, and code Playground

Bootstrap Show All Tabs

by Jennifer Perrin

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="tabbable" id="myTabs">
    <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>
    <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 class="tab-pane" id="tab3">
            <p>Howdy, I'm in Section 3.</p>
        </div>
    </div>
</div>

CSS

body { margin: 1.5% 3%; }

JavaScript

// Bootstrap v3.1.0
// Font Awesome 4.1.0

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