Button class toggle Issue with Bootstrap Accordion & Silverstripe

Question

I'm using Bootstrap's accordion for a project built on Silverstripe. The markup mimic's Bootstrap's docs as follows, with the following differences: aria-expanded="false" and panel-collapsed does not have class in since I want all items closed by default.

 <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
   <div class="panel panel-default">
     <div class="panel-heading" role="tab" id="heading1">
       <h4 class="panel-title">
         <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
         Panel title
         </a>
       </h4>
     </div>
     <div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
       <div class="panel-body">
         Lorem ipsum
       </div>
     </div>
   </div>
 </div>

It loads as expected, with all items closed. Clicking on the panel title opens and closes the panel body as expected. However, the action adds class="collapsed" to .panel-title > a on opening, and does not remove it with subsequent clicks .

This is my problem -- I need this class to toggle as it does on Bootstrap's example (no class when open, collapsed class when collapsed) so that I can style the title differently for each case.

I have spent hours on this and cannot figure out why it's not working. I've copied Bootstrap's code, and definitely have the latest version of bootstrap.min.js. I don't think I'm missing anything but maybe I've just been looking at it for too long. Please help!

Answer 1

Ok, so the issue was the project is built with Silverstripe, which rewrites hash links to specify a URL before the anchor, so it was adding '/' before the anchor links.

The solution is to disable the hash links , or write a custom handler to remove the collapsed class.

Have edited the original question to include Silverstripe.