ブートストラップアコーディオン：別のものがクリックされたときに自動折りたたみが行われない

Question

これに似た記事がありますが、回答が見つかりませんでした。

私はちょっとしたカスタムレイアウトがありますが、アコーディオン効果を追加したいのですが、理由を理解できないようですが、何らかの理由ですべてが完全に機能することを除いて、自動的に閉じないクリックしたここで

は私のアコーディオンコードです：

<aside class="col-lg-4"> 
    <div class="list-group"> 
    <ul class="product-sorting"> 
     <div id="accordion" role="tablist" aria-multiselectable="true" class="panel panel-group"> 
     <li><a href="#" data-group="all" class="list-group-item active">All Products</a></li> 
     <li> 
     <a data-group="IQF" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1">IQF Fruits (Individually Quick Frozen) 
     </a> 
     <div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1"> 
      <div class="panel-body"> 
      <p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p> 
      </div> 
     </div> 
     </li> 
     <li> 
     <a data-group="Fruit-Concentrate" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2"> 
     Fruit Juice Concentrate 
     </a> 
     <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2"> 
      <div class="panel-body"> 
      <p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p> 
      </div> 
     </div> 
     </li> 
     <li> 
     <a data-group="Puree-pulp" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3"> 
     Fruit Puree/ Pulp 
     </a> 
     <div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3"> 
      <div class="panel-body"> 
      <p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p> 
      </div> 
     </div> 
     </li> 
     <li> 
     <a data-group="Puree-Concentrate" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-expanded="false" aria-controls="collapse4"> 
     Fruit Puree Concentrate 
     </a> 
     <div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading4"> 
      <div class="panel-body"> 
      <p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p> 
      </div> 
     </div> 
     </li> 
     <li> 
     <a data-group="NFC" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse5" aria-expanded="false" aria-controls="collapse5"> 
     NFC 
     </a> 
     <div id="collapse5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading5"> 
      <div class="panel-body"> 
      <p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p> 
      </div> 
     </div> 
     </li> 
     <li> 
     <a data-group="Organic" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse6" aria-expanded="false" aria-controls="collapse6"> 
     Organic 
     </a> 
      <div id="collapse6" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading6"> 
      <div class="panel-body"> 
      <p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p> 
      </div> 
     </div> 
     </li> 
     <li> 
     <a data-group="Dried" class="list-group-item" data-toggle="collapse" data-parent="#accordion" href="#collapse7" aria-expanded="false" aria-controls="collapse7">Dried Fruit/ Sweetened Dried Fruit 
     </a> 
     <div id="collapse7" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading7"> 
      <div class="panel-body"> 
      <p>Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives.</p> 
      </div> 
     </div> 
     </li> 
     </div> 
    </ul> 
    </div> 
    </aside> 

これは、ように見えるされているものです：テキスト「直接果物/野菜から絞られ果汁100％のジュースを加えていない砂糖を含まない

"はすべてのパネルで同じダミーテキストなので、混乱させてはいけません。

Answer 1

使用<div class="accordion-group">

とアコーディオンのそれぞれにdata-parent="#parentdivid"を割り当てます。

例スニペット：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<h3>ACCORDION COLLAPSE</h3> 
 
<div class="accordion" id="myAccordion"> 
 
    <div class="panel"> 
 
     <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Question 1?</button> 
 
     <div id="collapsible-1" class="collapse"> 
 
      .. 
 
     </div> 
 
    </div> 
 
    <div class="panel"> 
 
     <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Question 2?</button> 
 
     <div id="collapsible-2" class="collapse"> 
 
      .. 
 
     </div> 
 
    </div> 
 
    <div class="panel"> 
 
     <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-3" data-parent="#myAccordion">Question 3?</button> 
 
     <div id="collapsible-3" class="collapse"> 
 
      ... 
 
     </div> 
 
    </div> 
 
</div>