javascript - Control multiple tab-contents with one nav-tabs

Question

I have a regular Twitter Bootstrap 3 tab. What I want to do is to control is to control multiple
tab-content container with one nav-tabs element.

Here is an example: jsfiddle

In this example, when I change tabs, only first one is changed. I want for both containers to change, not just first one.

Thanks!

Answer 1

Here I update your jsfiddle

I add the data-target attribute to a-elements and change ids in second tab-content

I modified this lines,

Yours:

<li class="active"><a href="#home" data-toggle="tab">C1</a></li>
<li><a href="#profile" data-toggle="tab">C2</a>  </li>

My update:

<li class="active"><a href="#home" data-target="#home, #home_else" data-toggle="tab">C1</a></li>
<li><a href="#profile" data-target="#profile, #profile_else" data-toggle="tab">C2</a>  </li>

And the second tab-content, Yours:

<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>Content 1.</p>
    </div>
    <div class="tab-pane fade" id="profile">
        <p>Content 2.</p>
    </div>
</div>

My update:

<div id="myTabContent2" class="tab-content">
    <div class="tab-pane fade in active" id="home_else">
        <p>Content 1.</p>
    </div>
    <div class="tab-pane fade" id="profile_else">
        <p>Content 2.</p>
    </div>
</div>