ブートストラップ折りたたみボタンでマルチ選択を無効にする

Question

私は、複数のボタンの内容をいつでも表示できるようにすることなく、折りたたみ可能なコンテンツを表示するブートストラップボタンを実装する方法を見つけようとしています。私はボタンが折りたたみ可能なコンテンツをトリガするために取得することができますが、私は両方が同時に非崩壊しているそれらを停止する方法を見つけるカント

：ここ

<p> 
    <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> 
    Button 1 
    </a> 
    <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2"> 
    Button 2 
    </a> 
</p> 

<div class="collapse" id="collapseExample"> 
    <div class="card card-block"> 
    Here is some example text 
    </div> 
</div> 

<div class="collapse" id="collapseExample2"> 
    <div class="card card-block"> 
    Here is some example text, too 
    </div> 
</div> 

JSフィドルデモ：https://jsfiddle.net/hzs68sne/

Answer 1

何あなたはcollapse accordionのように見えます。

現在の設定でこれを行うには、グループ全体を単一の.panel divにラップし、data-parent属性を使用します。

<div id="container"> 
    <div class="panel"> 
    <p> 
     <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" data-parent="#container"> 
      Button 1 
     </a> 
     <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample2" data-parent="#container"> 
      Button 2 
     </a> 
    </p> 

    <div class="collapse" id="collapseExample"> 
     <div class="card card-block"> 
     Here is some example text 
     </div> 
    </div> 

    <div class="collapse" id="collapseExample2"> 
     <div class="card card-block"> 
     Here is some example text, too 
     </div> 
    </div> 

    </div> 
</div> 

JSFiddleデモ：https://jsfiddle.net/gbfb32z9/

は覚えておいてください：

• .panel divニーズdata-parent要素の直接の子であることを。
• .collapse要素は、.panel要素の直接の子要素です。