Search code examples
jquerytwitter-bootstrapwordpresswordpress-themingconflict

Collapse Bootstrap 3 Plugins Conflict Wordpress


to whom it may concern,

I'd like some help working out why a bootstrap collapse link is working but not correctly. It's the blue button below the world map on the left of the test site (link below). It should hide the text below when the button's clicked. But when it's clicked it scrolls to the element it's linked to, rather than collapsing the element.

I realise there's a lot of .js scripts that might be overriding the bootstrap collapse function. Is there something I can add as a snippet to make sure there's no conflict? Below is the link to the test site & a link to show the button that's not acting right.

Link here - collapse now fixed

Image link here

Thanks in advance :-]


Solution

  • Your html for the anchor includes href instead of data-target and that is what making it scroll up. So change it to data-target from href.

    Current

    <a class="btn btn-primary" href="#collapseExample" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseExample">
                           <!--^^^^Change this-->
    

    Update

    <a class="btn btn-primary" data-target="#collapseExample" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseExample">
                           <!--^^^^^^^^^^^To this-->
    

    That will do the trick.