ブートストラップを使用して複数のデータターゲットを折りたたむ

Question

ブートストラップを使用して3つのdivを展開/折りたたむ3つのボタンがあります。しかし、2つの異なるボタンを連続してクリックすると、2つのdivが順番に展開されます。あるdivが展開される前に他のすべてが展開されているため、一度に1つのdivのみが表示される可能性はありますか？

今、Div1を拡張するためにボタン1をクリックした場合、ボタン2をクリックする前にDiv1を閉じるためにもう一度ボタン1をクリックする必要があります。 Div1とDiv2の両方の内容が表示されます。

これは私が持っているものです。

<div class="btn-group btn-group-justified"> 
    <div class="col-sm-6 col-md-4 col-lg-4"> 
     <button class="btn btn-lg open-group" type="button" data-toggle="collapse" data-target="#Div1" aria-expanded="false" aria-controls="Div1">Div1 Button<span class="caret"></span> 
     </button> 
    </div> 
    <div class="col-sm-6 col-md-4 col-lg-4"> 
     <button class="btn btn-lg open-group" type="button" data-toggle="collapse" data-target="#Div2" aria-expanded="false" aria-controls="Div2">Div2 Button<span class="caret"></span> 
     </button> 
    </div> 
    <div class="col-sm-6 col-md-4 col-lg-4"> 
     <button class="btn btn-lg open-group" type="button" data-toggle="collapse" data-target="#Div3" aria-expanded="false" aria-controls="Div3">Div3 Button<span class="caret"></span> 
     </button> 
    </div> 
</div> 

<div class="collapse" id="Div1">Content of Div1 here </div> 
<div class="collapse" id="Div2">Content of Div2 here </div> 
<div class="collapse" id="Div3">Content of Div3 here </div> 

Answer 1

ですから、すべてのtoggleddivsを格納するためのクラスpanelを持って、その後toggleにdata-parent="#parentdiv"を使用して親を設定する必要があります。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div id="parentdiv"class="btn-group btn-group-justified"> 
 
    <div class="panel"> 
 
    <div class="col-sm-6 col-md-4 col-lg-4"> 
 
     <button class="btn btn-lg open-group" type="button" data-parent="#parentdiv" data-toggle="collapse" data-target="#Div1" aria-expanded="false" aria-controls="Div1">Div1 Button<span class="caret"></span> 
 
     </button> 
 
    </div> 
 
    <div class="col-sm-6 col-md-4 col-lg-4"> 
 
     <button class="btn btn-lg open-group" type="button" data-parent="#parentdiv" data-toggle="collapse" data-target="#Div2" aria-expanded="false" aria-controls="Div2">Div2 Button<span class="caret"></span> 
 
     </button> 
 
    </div> 
 
    <div class="col-sm-6 col-md-4 col-lg-4"> 
 
     <button class="btn btn-lg open-group"data-parent="#parentdiv" type="button" data-toggle="collapse" data-target="#Div3" aria-expanded="false" aria-controls="Div3">Div3 Button<span class="caret"></span> 
 
     </button> 
 
    </div> 
 

 

 
<div class="collapse" id="Div1">Content of Div1 here </div> 
 
<div class="collapse" id="Div2">Content of Div2 here </div> 
 
<div class="collapse" id="Div3">Content of Div3 here </div> 
 
</div> 
 
</div>