ブートストラップ：データターゲットが複数のdivを折りたたんでいます

Question

私は折り畳んだり展開したりする2つのdivを持っています。

場合は、ボタンBのクリックが、私はDIVのB.に

を縮小/​​拡大したい場合、これは私のコードであれば、ボタンAをクリックすると、私は/崩壊のdiv A. を展開したい場合：

<!-- I define data-target=A --> 
<div> 
    <div data-toggle="collapse" data-target="#A"> 
    <strong>More...</strong> 
    </div> 
</div> 

<!-- I define data-target=B --> 
<button data-toggle="collapse" data-target="#B">Details</button> 


<!-- I define div A --> 
<div class="panel-collapse collapse" id="A" role="tabpanel" aria-labelledby="heading-{{ feature.name }}"> 
    <div><strong>Long description: ...</strong></div> 
</div> 

<!-- I define div B --> 
<div class="panel-collapse collapse" id="B" role="tabpanel" aria-labelledby="heading-{{ feature.name }}"> 
    Blablabla... 
</div> 

"A"は正常に動作します。しかし、私が「B」を崩壊/拡大したいとき、それはAとBの両方に同時に影響します。

誰かが間違っていますか？

Answer 1

"ここにはid=B"がありません。

はこれを試してみてください：

<div class="panel-collapse collapse" id="B" role="tabpanel" aria-labelledby="heading-{{ feature.name }}"> 
    Blablabla... 
</div> 

Answer 2

このタイプのコードは、まず、ID「A」のためと「B」あなたの問題が解決されます後に行うことを確認します。ここに私のコードを貼り付けるとき

<div class="row"> 
    <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#A">Simple collapsible</button> 
    <div class="panel-collapse collapse" id="A" role="tabpanel" aria-labelledby="heading-A"> 
    <div><strong>Long description: ...</strong></div> 
    </div> 
</div> 
<div class="row"> 
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#B">Simple </button> 
<div class="panel-collapse collapse" id="B" role="tabpanel" aria-labelledby="heading-B"> 
<div><strong>Long description: ...</strong></div> 
</div>