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

Question

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.

Answer 1

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-panes 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 #ids or .classes 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)