ブートストラップアコーディオンで2つのアコーディオン折りたたみを持つ方法

Question

ブートストラップアコーディオンを使用していて、1つのアコーディオンボタンに2つの折りたたみ可能なdivが必要です。

問題は、idと2つの同じIDを使用するブートストラップが同じページに表示されないことです。

私にとっての課題は、崩壊可能なdiv要素が同様

<div class="left-col"> 
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
    <div class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="headingOne"> 
      <h4 class="panel-title"> 
       Title 1 
      </h4> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
      <div class="panel-body"> 
       Content 1 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="headingTwo"> 
      <h4 class="panel-title"> 
       Title 2 
      </h4> 
     </div> 
     <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
      <div class="panel-body"> 
       Content 2 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="headingThree"> 
      <h4 class="panel-title"> 
       Title 3 
      </h4> 
     </div> 
     <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
      <div class="panel-body"> 
       Content 3 
      </div> 
     </div> 
    </div> 
</div> 
</div> 
<div class="right-col"> 
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
    <div class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="headingOne"> 
      <h4 class="panel-title"> 
       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
        Title 1 
       </a> 
      </h4> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
      <div class="panel-body"> 
       Content 1 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="headingTwo"> 
      <h4 class="panel-title"> 
       <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
        Title 2 
       </a> 
      </h4> 
     </div> 
     <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
      <div class="panel-body"> 
       Content 2 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="headingThree"> 
      <h4 class="panel-title"> 
       <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 
        Title 3 
       </a> 
      </h4> 
     </div> 
     <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
      <div class="panel-body"> 
       Content 3 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

同じ親に該当しないあなたはJavaScriptで崩壊するアコーディオンを引き起こす可能性があることです。それらに共有クラスを与え、いくつかのクリックを使用して、このようなロジックを崩壊させます。

$('#button_to_trigger_collapse').click(function(){ 
    $('.div_to_collapse').collapse('toggle'); 
}); 

動作を改善する方法の詳細については、こちらのドキュメントを参照してください。

http://getbootstrap.com/javascript/#via-javascript-3