CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
vabm
vabm

Reputation: 285

Right call order for Boostrap and JQuery when using collapsibles

I am having the weirdest problem and cannot figure it out. I am working with a series of collapsable buttons in bootstrap and everything seems to work fine if I call boostrap before jquery:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>

However, if I call jquery before boostrap (as should be done) then the collapsibles won't close after being opened. I am not sure if I am calling libraries that are incompatible between each other or there might be another issue I am not aware of? The complete <head> tag is:

<link href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.1/dragula.min.css" rel="stylesheet" />   
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<link href="https://cdn.bootcss.com/dragula/3.7.1/dragula.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.1/dragula.min.js"></script>

And a sample of the collapsibles:

<div class="container" id="maincontainer">
    <div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" href="#collapse1"><center><b>My Panel</b></center></a>
                </h4>
            </div>
            <div id="collapse1" class="panel-collapse collapse">
               <ul class="list-group">                   
                  ### contents
               </ul
            </div>
        </div>
     </div>
  </div>

Upvotes: 2

Views: 51

Answers (1)

luissimo
luissimo

Reputation: 978

I'm guessing you are using a template for your website.

So your collapsible is probably using Bootstrap in combination with jQuery's $(document).ready and thus bootstrap needs to be loaded before the jQuery code otherwise you are missing parts of the DOM.

The thing about calling jQuery before bootstrap is is that your jQuery code contains a lot of $(document).ready(function() { code }) ; blocks, which means that the DOM(the entire structure of your page) needs to be loaded in order for the code to execute.

So if you call jQuery before bootstrap it will go through all of your jQuery code and give out false on a lot of code blocks because a big part of your DOM(the bootstrap integrated parts) gets loaded after the jQuery code is already executed.

So my guess(since i can't see your entire code) would be that your code is fine and that it's just a matter of calling scripts in the right order.

Upvotes: 1

Related Questions