title: close all open existing accordions before showing new one
body: <p>On my page I have 8 products, each product has its own accordion which when clicked expands and shows additional content.</p>
  
  <p>I'm having an issue trying to close any other open accordions when one has been selected, so if I click on say product 1 "find store" I would expect all other accordions to close, and product 1 accordion to open. </p>
  
  <p>I have googled this and found possible solutions which are as follows</p>
  
  <p><a href="https://stackoverflow.com/questions/12698331/bootstrap-js-accordion-collapse-expand">bootstrap-js-accordion-collapse-expand</a><br/>
  <a href="https://stackoverflow.com/questions/20347553/bootstrap-3-collapse-accordion-collapse-all-works-but-then-cannot-expand-all-wh">bootstrap-3-collapse-accordion-collapse-all-works-but-then-cannot-expand-all-wh</a></p>
  
  <p>but with no avail, my current HTML for each product is as follows </p>
  
  <pre><code>&lt;div class="col-lg-4" style="margin-bottom:5%;"&gt;
     &lt;div class="boxTop"&gt;&lt;/div&gt;
         &lt;div class="box"&gt;
            &lt;img src="/Content/Images/YogurtImages_280x135/Blueberry_Yogurt.png" width="280" height="135" class="productMarginTop"&gt;
            &lt;br /&gt;
            &lt;p style="color: #003869; font-size: 25px;" class="productTitle text-center"&gt;
               BLUEBERRY
            &lt;/p&gt;
            &lt;br /&gt;
            &lt;hr style="border: 0.2px solid #003869" /&gt;
            &lt;h5 style="color: #003869; font-size:19px" class="text-center" id="nutritionInfo" data-productid="1" data-colorcode="#003869" data-productname="BLUEBERRY"&gt;
              NUTRITIONAL INFO &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
            &lt;/h5&gt;
            &lt;hr style="border: 0.2px solid #003869" /&gt;
             &lt;h5 class="text-center" id="findStore"&gt;
                &lt;a data-toggle="collapse" data-parent="#accordion" href="#1" aria-expanded="true" aria-controls="1" style="color: #003869;font-size:19px" class="text-center"&gt;
                   FIND A STORE &lt;span class="glyphicon glyphicon-chevron-down"&gt;&lt;/span&gt;
                &lt;/a&gt;
            &lt;/h5&gt;
            &lt;div id="1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"&gt;
              &lt;div class="panel-body"&gt;
                &lt;p&gt;
                   Content
                &lt;/p&gt;
                 &lt;p&gt;
                   More Content
                &lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
               &lt;hr style="border: 0.2px solid #003869" /&gt;
          &lt;/div&gt;
         &lt;div class="boxBtm"&gt;&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>You can see find store href="#1", whereby the number 1 corresponds to the accordion. Now as I have 8 products on my page the Id will increment from 1 to 8 which I don't personally see that as a problem.</p>
  
  <p>I'm trying to trigger the closing of all accordions off the "find store" click as follows.</p>
  
  <pre><code>$('h5:not(#nutritionInfo)').click(function () {
  
          $('.accordion-body').each(function () {
              if ($(this).hasClass('in')) {
                  $(this).collapse('toggle');
              }
          });
  
   //$('.accordion-body.in').collapse('toggle');
   //$('.accordion-body').collapse('hide');
  
      });
  </code></pre>
  
  <p>But as I have mentioned this doesn't seem to be working at all, I did think maybe the function isn't being called so I placed an alert box inside the function and it did alert my message.</p>
  
  <p>If anyone can help I'd appreciate it.</p>
  
  <p>** updated jquery **</p>
  
  <pre><code> $('.panel-body').each(function () {
          if ($(this).hasClass('in')) {
              $(this).collapse('toggle');
          }
      });
  </code></pre>