0

I am working with a page featuring a Bootstrap accordion. It works correctly, but I was asked to implement a feature whereby a specific collapsible element is "open" when linked from various other pages - so "www.whatever.tld#e2" would take you to the second element already opened. There was no problem getting something to behave like this, it's adequately covered by various other pages on StackOverflow and elsewhere. The implementation I tried was as follows:

$(window.location.hash + '.collapse').collapse('toggle');

This functions as desired, it opens the correct section of the accordion. However, after navigating to the page like this, it "locks" the page in that form - it no-longer responds to any clicks on accordion elements and you cannot close the opened element or open others. Nobody else seems to have been experiencing this problem or did not mention it if they did e.g. here:

Bootstrap Collapse - open the given id fragment

bootstrap-collapse.js hide and show events

I have attempted variations on this code, e.g. 

var anchor = window.location.hash;
$(".collapse").collapse('hide');
$(anchor).collapse('show');

This behaves unexpectedly - all elements are forced open, and cannot close. Removing the second line fixes this issue, but then otherwise behaves as the original code I specified does - it opens the targeted element, but freezes the accordion.

The following is an excerpt of the structure of the accordion I am working with. I would prefer not to have to modify this unless I can't avoid it, since I'm trying to stick with organisational style guides and this accordion code is a standard accordion that people use on our CMS:

<div id="accordion-asset-listing" class="accordion" id="accordion" role="tabpanel">
    <section class="accordion-group" role="tab" aria-selected="false">
       <header class="accordion-heading">
           <h3><a aria-controls="pharmacy" href="#pharmacy" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-asset-listing">Pharmacy</a></h3>
       </header>

       <div id="pharmacy" class="accordion-body collapse" aria-hidden="true" role="tabpanel">
          <div class="accordion-inner">
             <p><!-- content here --></p>
          </div>
       </div>
    </section>

I am not amazing at JS or its use so any pointers people had to put me on the right track would be greatly appreciated.

Community
  • 1
  • 1
user1625391
  • 1
  • 1
  • 1
    IIRC, the `hide`/`show` methods are async, so doing a `show` immediately after a `hide` without using an event handler won't work. You should wait for for the `hidden.bs.collapse` event to fire before calling `show`. – cvrebert Dec 04 '14 at 01:43
  • I should have included it, but that code is executing inside of the standard "wait-for-load" Jquery code. So theoretically it should only be executing after the page has finished. Is that inadequate in this case? – user1625391 Dec 04 '14 at 02:39

1 Answers1

0

Got it sorted in the end although I still don't understand why it originally broke. After jumping into the .js files that the site called upon, I ended up manually reconstructing the couple that I wanted and calling them in code. This is not a good solution but it has worked, at least.

Since the site (a university web-site managed on Squiz Matrix CMS) uses a sort of "customised version" of Bootstrap, Jquery and such that seems to strip out some elements of those things, there may have been some bugs introduced specific to our version of these things.

user1625391
  • 1
  • 1