Bootstrapのdata-toggleによる複数の表示切替

###前提・実現したいこと
下記のようにBootstrapを使ってタブの切り替えを行っています。

###もとのソースコード

html
1<ul class="nav nav-pills" id="right-tab">
2  <li class="active"><a href="#tab1" data-toggle="tab">Home</a></li>
3  <li><a href="#tab2" data-toggle="tab">Contents</a></li>
4  <li><a href="#tab3" data-toggle="tab">Messages</a></li>
5</ul>
6
7<div class="main tab-content">
8  <div class="tab-pane active" id="tab1">
9    <p>tab1</p>
10  </div>
11  <div class="tab-pane" id="tab2">
12    <p>tab2</p>
13  </div>
14  <div class="tab-pane" id="tab3">
15    <p>tab3</p>
16  </div>
17</div>
18

これでタブの切り替えはうまくいくのですが、これに対して、下記のようなコードを追加し、
id="right-tab"内のタブをクリックした際、class="main"とclass="other"の両方のタブコンテンツを切り替えようとしたのですが、うまくいきませんでした。
idと一対一で対応させていることがうまくタブ切り替えがいかない原因なのでしょうか？
何か解決策がございましたら、ご回答を頂けると助かります_(..)

###追加後のソースコード

html
1<ul class="nav nav-pills" id="right-tab">
2  <li class="active"><a href="#tab1" data-toggle="tab">Home</a></li>
3  <li><a href="#tab2" data-toggle="tab">Contents</a></li>
4  <li><a href="#tab3" data-toggle="tab">Messages</a></li>
5</ul>
6
7<div class="main tab-content">
8  <div class="tab-pane active" id="tab1">
9    <p>tab1</p>
10  </div>
11  <div class="tab-pane" id="tab2">
12    <p>tab2</p>
13  </div>
14  <div class="tab-pane" id="tab3">
15    <p>tab3</p>
16  </div>
17</div>
18
19<!-- 追加 -->
20<div class="other tab-content">
21  <div class="tab-pane active" id="tab1">
22    test1
23  </div>
24  <div class="tab-pane" id="tab2">
25    test2
26  </div>
27  <div class="tab-pane" id="tab3">
28    test3
29  </div>
30</div>

行動規範の内容に同意します

回答1件

ベストアンサー

HTMLのid属性は、ひとつの文章内で一意でなければならず、重複が許されていません。
動かないのはおそらくそれが、原因かと思います。

削除：
複数のタブをコントロールしたいのであれば、javascriptなどでタブ押下時に複数のコンテンツを切り替える処理を実装する必要があると思います。

追記：
data-targetを用いれば動くみたいです。

HTML
1<ul class="nav nav-pills" id="right-tab">
2  <li class="active"><a href="#tab1" data-target="#tab1, #tab11" data-toggle="tab">Home</a></li>
3  <li><a href="#tab2" data-target="#tab2, #tab12"  data-toggle="tab">Contents</a></li>
4  <li><a href="#tab3" data-target="#tab3, #tab13"  data-toggle="tab">Messages</a></li>
5</ul>
6
7<div class="main tab-content">
8  <div class="tab-pane active" id="tab1">
9    <p>tab1</p>
10  </div>
11  <div class="tab-pane" id="tab2">
12    <p>tab2</p>
13  </div>
14  <div class="tab-pane" id="tab3">
15    <p>tab3</p>
16  </div>
17</div>
18<!-- 追加 -->
19<div class="other tab-content">
20  <div class="tab-pane active" id="tab11">
21    test1
22  </div>
23  <div class="tab-pane" id="tab12">
24    test2
25  </div>
26  <div class="tab-pane" id="tab13">
27    test3
28  </div>
29</div>