close all open existing accordions before showing new one

Question

On my page I have 8 products, each product has its own accordion which when clicked expands and shows additional content.

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.

I have googled this and found possible solutions which are as follows

bootstrap-js-accordion-collapse-expand
bootstrap-3-collapse-accordion-collapse-all-works-but-then-cannot-expand-all-wh

but with no avail, my current HTML for each product is as follows

<div class="col-lg-4" style="margin-bottom:5%;">
   <div class="boxTop"></div>
       <div class="box">
          <img src="/Content/Images/YogurtImages_280x135/Blueberry_Yogurt.png" width="280" height="135" class="productMarginTop">
          <br />
          <p style="color: #003869; font-size: 25px;" class="productTitle text-center">
             BLUEBERRY
          </p>
          <br />
          <hr style="border: 0.2px solid #003869" />
          <h5 style="color: #003869; font-size:19px" class="text-center" id="nutritionInfo" data-productid="1" data-colorcode="#003869" data-productname="BLUEBERRY">
            NUTRITIONAL INFO <span class="glyphicon glyphicon-chevron-right"></span>
          </h5>
          <hr style="border: 0.2px solid #003869" />
           <h5 class="text-center" id="findStore">
              <a data-toggle="collapse" data-parent="#accordion" href="#1" aria-expanded="true" aria-controls="1" style="color: #003869;font-size:19px" class="text-center">
                 FIND A STORE <span class="glyphicon glyphicon-chevron-down"></span>
              </a>
          </h5>
          <div id="1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
              <p>
                 Content
              </p>
               <p>
                 More Content
              </p>
              </div>
            </div>
             <hr style="border: 0.2px solid #003869" />
        </div>
       <div class="boxBtm"></div>
 </div>

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.

I'm trying to trigger the closing of all accordions off the "find store" click as follows.

$('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');

    });

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.

If anyone can help I'd appreciate it.

** updated jquery **

 $('.panel-body').each(function () {
        if ($(this).hasClass('in')) {
            $(this).collapse('toggle');
        }
    });

Answer 1

Well, a few things:

1. Your collapse toggle links have data-parent="#accordion". That alone should be sufficient for the behavior you want, assuming you actually have an element with that id that wraps all of these products.

2. The JavaScript you're using references .accordion-body, but such a class is not present anywhere. You're using .panel-body here for the collapsible.

3. While probably not the issue, ids must begin with an alpha character, so setting something like id="1" is invalid HTML.