Bootstrap手风琴：单击另一个时不会自动折叠

Question

I am aware there are similar posts to this one, but I could not find an answer.

I have a bit of a custom layout, but I want to try and add the accordion effect however I cannot seem to figure out why, but for some reason everything works perfectly except that they do not close automatically once another one is clicked.

Here is my Accordion code:

   <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>

This is what is looks like:

The text " Juice that is directly squeezed from a fruit/ vegetable. 100% juice contains no added sugar or preservatives. " is just dummy text it's the same for all the panels so do not let that confuse you.

Answer 1

Use <div class="accordion-group">

and assign data-parent="#parentdivid" to each of the accordion.

Example Snippet:

 <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>