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.

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.

• javascript
• twitter-bootstrap

• Are you saying you want one set of tabs to control two (separate) sets of panes? – Jeffery To Commented Jun 28, 2012 at 9:05
• Isn't this an exact duplicate of your previous question: stackoverflow.com/questions/11127973/… ? – RustyTheBoyRobot Commented Jun 29, 2012 at 17:02
• @GirlCanCode2 Accept an answer so i can award answer which worked for you – user1432124 Commented Jul 3, 2012 at 16:49

4 Answers 4

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)

you can only access one id at a time, this is why it is called an id.

Get the content from the first one and apply it to the second one.

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

   $(this.href +'2').html($(this.href).html()

})


<div class="tab-content">
  <div class="tab-pane active" id="home">Content 1</div>

</div>


 <div class="tab-content2">
   <div class="tab-pane active" id="home2">Content 2</div>
 </div>

Here is a working solution for your problem (updated):

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="home">Tab-1</div>
    <div class="tab-pane" id="profile">Tab-2</div>
</div>
<div class="tab-content" id="tab-content2">
    <div class="tab-pane active" id="home2">Home Content 2</div>
    <div class="tab-pane" id="profile2">Profile Tab-2</div>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $("#tab-content2 div").each(function(i, e){ 
        if(!$(e).hasClass('active')) $(e).hide();
    });
    $('#myTab>li>a').on('click', function (e) {
        e.preventDefault();
        $(this).tab('show');
        $("#tab-content2 div").each(function(i, e) {
            $(e).hide();
        });
        $(this.getAttribute('href') + "2").show();
    });
});
</script>

    <script type="text/javascript">
    $(function () {
        $('#myTab >li>a').on('click', function (e) {
            e.preventDefault();
            $(this).tab('show');
            //
            $('#extendedView').html($(this).html());
        });
    });
</script>

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
    <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">Tab-1</div>
    <div class="tab-pane" id="profile">Tab-2</div>
    <div class="tab-pane" id="messages">Tab-3</div>
    <div class="tab-pane" id="settings">Tab-4</div>
</div>
<div class="tab-content2">
    <div class="tab-pane active" id="extendedView">Content 2</div>

OR

<script type="text/javascript">
    $(function () {
        $('#myTab >li>a').on('click', function (e) {
            e.preventDefault();
            $(this).tab('show');
            //
            $(this.getAttribute('href') + '2').html($(this).html());
        });
    });
</script>

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
    <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">Tab-1</div>
    <div class="tab-pane" id="profile">Tab-2</div>
    <div class="tab-pane" id="messages">Tab-3</div>
    <div class="tab-pane" id="settings">Tab-4</div>
</div>
<div class="tab-content2">
    <div class="tab-pane active" id="home2"></div>
    <div class="tab-pane" id="profile2"></div>
    <div class="tab-pane" id="messages2"></div>
    <div class="tab-pane" id="settings2"></div>

</div>