Boostrap CSS accordion not collapsing on secondary pages

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>


Source: html

Leave a Reply