ブートストラップの折りたたみ可能なターゲットの複数の要素

Question

ブートストラップ折りたたみ式を使用して複数の要素を開いたり閉じたりしようとしていますが、その要素を1つだけ開くことは可能ですか？

<button data-toggle="collapse" data-target=".elements">Collapsible</button> 

<div class="elements collapse"> 
Lorem1 ipsum dolor text.... 
</div> 

<div class="elements collapse"> 
Lorem2 ipsum dolor text.... 
</div> 

Answer 1

はいすることができますが、データベースを使用して取引がwhile loopから要素を生成した場合、これはあなたのための障害となり、良い例を確認することができますメソッドは、jqueryでtoggleClassメソッドを使用することです。

$(".elements").toggleClass(show, hide); 

$('#btn').on('click', function(){ 
 

 
$(".elements").toggleClass('hide'); 
 

 
})

.hide{ 
 
display:none; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    
 
    
 
    
 
<button class="btn btn-default" id="btn">Toggle</button> 
 
    
 
<div class="elements hide">1</div> 
 
    <div class="elements hide">2</div> 
 
    <div class="elements hide">3</div> 
 
    <div class="elements hide">4</div> 
 
    <div class="elements hide">5</div> 
 
     <div class="elements hide">6</div> 
 
     
 
     
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 2

あなたはここに

<p> 
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button> 
</p> 
<div class="row"> 
    <div class="col"> 
    <div class="collapse multi-collapse" id="multiCollapseExample1"> 
     <div class="card card-body"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
     </div> 
    </div> 
    </div> 
    <div class="col"> 
    <div class="collapse multi-collapse" id="multiCollapseExample2"> 
     <div class="card card-body"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
     </div> 
    </div> 
    </div> 
</div>