How to return content to two separate tabbable ID's upon one tab click using Twitter Bootstrap's Tabbable Tabs in a Rails 3.2 App

javascript, twitter-bootstrap

Solution

Here is one solution without extra javascript, and compatible with the plugin API.

The principle is to use 2 `.tab-content` and take advantage of the `data-target` selector attribute.

HTML

The first `.tab-content` contains your normal `.tab-pane`

<div class="tab-content">
    <div class="tab-pane active" id="home">home</div>
    <div class="tab-pane home-tab">class home</div>
    <div class="tab-pane profile-tab">profile</div>
    <div class="tab-pane messages-tab">messages</div>
    <div class="tab-pane settings-tab">settings</div>
</div>

and the second `.tab-content` contains the extra `.tab-pane`s that are optionnal - plus an empty one (`#notab_else` here)

<div class="tab-content">
    <div class="tab-pane active" id="home_else">home_else</div>
    <div class="tab-pane home-tab">class home</div>
    <div class="tab-pane profile-tab messages-tab settings-tab" id="notab_else"></div>
</div>

Then you have your tabs with one extra attribute, `data-target` :

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home" data-target="#home, #home_else">Home</a></li>
    <li class=""><a href="#home" data-target=".home-tab">Class Home</a></li>
    <li><a href="#profile" data-target=".profile-tab">Profile</a></li>
    <li><a href="#messages" data-target=".messages-tab">Messages</a></li>
    <li><a href="#settings" data-target=".settings-tab">Settings</a></li>
</ul>

This attribute `data-target` defines the `.tab-pane`(s) associated with it. The magic is that you can use `#id`s or `.class`es or any valid jQuery selector.

JavaScript

All you need to activate everything is the default code :

$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

And you can also use your own actions to trigger the tabs as defined by the API.

You do not need that if you keep the default behavior for tabs.

$('#myTab a:first').tab('show');

EXTRA

- You can be free of any javascript if you set `data-toggle="tab"` to the `a` elements

- There is a fade effect available if you add the `fade` class to the `.tab-pane` (and `fade in` for the `.active` one)

DEMOS

Here is the demo (jsfiddle) and the demo with extra (jsfiddle)

Problem

Using Twitter Bootstrap's bootstrap-tab.js, I have: ``` <ul class="tabnavcenter" id="myTab"> <li class="active"><a href="#home" data-toggle="tab">about</a></li> <li><a href="#tab2" data-toggle="tab">education</a></li> <li><a href="#tab3" data-toggle="tab">experience</a></li> <li><a href="#tab4" data-toggle="tab">verified skills</a></li> <li><a href="#tab5" data-toggle="tab"> video</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="home">Content 1</div> <div class="tab-pane" id="profile">...</div> <div class="tab-pane" id="messages">...</div> <div class="tab-pane" id="settings">...</div> </div> ``` How can I get it so if I put: ``` <div class="tab-content"> <div class="tab-pane active" id="home">Content 2</div> </div> ``` ... two places in the profile (once above and once below a navbar) and with different content in each, it would work? As of now, the content appears, but once its clicked, it disappears. Can there be two "active" li's at the same time? Edit: Since I'm using this in a Rails 3.2 App, I currently have the following in bootstrap-tab.js: ``` $('#myTab a').click(function (e) { e.preventDefault(); $(this).tab('show'); }) $('#myTab a[href="#home"]').tab('show'); $('#myTab a[href="#tab2"]').tab('show'); $('#myTab a[href="#tab3"]').tab('show'); $('#myTab a[href="#tab4"]').tab('show'); $('#myTab a[href="#tab5"]').tab('show'); $('#myTab a[href="#home2"]').tab('show'); $('#myTab a[href="#tab22"]').tab('show'); ``` and after putting the following in user_body.html.erb: ``` <script type="text/javascript"> $(function () { $('#myTab >li>a').on('click', function (e) { e.preventDefault(); $(this).tab('show'); // $(this.getAttribute('href') + '2').html($(this).html()); }); }); ``` ... I get the second content in the div after refreshing the page, no change when I click on the second tab, and then a change back to the name of the first 'a' when I click back on the first one. It's a mess.

Original source