Boostrap CSS accordion not collapsing on secondary pages

Question

I'm using the Bootstrap Accordion Menu on my website and on the homepage it works perfectly but on any page except for the homepage, it simply doesn't work, when I click a menu collapse link, the URL simply changes to #collapseOne.

It may be of interest that I'm using this as a ContentHolder inside Business Catalyst. Here is the link to JSFiddle

And here's the website where the problem occurs.

Many thanks.

<div class="panel-group" id="accordion">
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> RC Cars</a>
        </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
        <div class="panel-body">
            <ul>
            <li><h4 class="text-left"><a href="rc-electric-cars ">RC Electric Cars</a></h4></li>
            <li><h4 class="text-left"><a href="/">RC Petrol Cars</a></h4></li>
            <li><h4 class="text-left"><a href="/">RC Nitro Cars</a></h4></li>
            </ul>
        </div>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> RC Trucks</a>
        </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
            <ul>
            <li><h4 class="text-left"><a href="rc-electric-cars ">RC Electric Trucks</a></h4></li>
            <li><h4 class="text-left"><a href="/">RC Petrol Trucks</a></h4></li>
            <li><h4 class="text-left"><a href="/">RC Nitro Trucks</a></h4></li>
            </ul>
        </div>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> RC Planes</a>
        </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
        <div class="panel-body">
            <ul>
            <li><h4 class="text-left"><a href="rc-electric-cars ">RC Electric Planes</a></h4></li>
            <li><h4 class="text-left"><a href="/">RC Petrol Planes</a></h4></li>
            <li><h4 class="text-left"><a href="/">RC Nitro Planes</a></h4></li>
            </ul>
        </div>
    </div>
</div>

Answer 1

That's because you added javascript files right on the main page (and not added it in secondary pages).

You should move

<!-- jQuery Version 1.11.1 -->
<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"></script>

to "header" tag content (just like .css files) and it will work on all pages.