Bootstrap accordion: Expand / Collapse all not working

Question

I found that solution, to expand all accordion sections: http://www.bootply.com/peFUdnwOpZ

I copied the code in Joomla. Via Gantry I loaded Javascript file. I tried even, to load the javascript within the article.

But It is not working. Can Anybody help?

Background information: I had to add bootstrap min.js , otherwise, the function "accordion" was not working properly. Template is working with Bootstrap 3.3.6.

I tried even to add the exact same files, loaded in http://www.bootply.com/peFUdnwOpZ .

1. //ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
2. //netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js
3. //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css

Next Try. I loaded script via Joomla plugin. I loaded the script in header and body, before and after head/body tag.

Nothing worked.

I traced it down: On another template, I worked with, I figured out, that the order of loading the 3 javascripts is very important. So, loading manually before end of header is much important! first jquery.min.js than bootstrap.min.js and than custom javascript (see in the example link) worked. But on my own site, it seems, there are some errors in loading jquery and bootstrap javascript properly. Because console says:

null is not an object (evaluating '$('.closeall').click')

So, it misses the link to the other javascript files. Maybe some can help?

Answer 1

I believe you may have forgot to add the following piece of code in your custom js file -

$('.closeall').click(function(){
    $('.panel-collapse.in')
    .collapse('hide');
});
$('.openall').click(function(){
    $('.panel-collapse:not(".in")')
    .collapse('show');
});

Hope this may work for you :-)