Karaethon Posted January 3, 2019 Share Posted January 3, 2019 This is a test page that I built to figure out why my bootstrap collapse ability is awol... I can't figure out why it won't collapse and expand... Neither my test section or the working one I cooped from w3schools bootstrap page works. But only in this page, if I use the w3schools code on it's own complete page it works fine.. and I edited the CDN links (on the w3schools working page) to match my links in here and it STILL worked fine there.... I'm tearing my hair out... <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row"> <div class="col-2 bg-warning"> <button data-toggle="collapse" data-target="#test">C</button> </div> <div class="col-8 bg-danger"> <div class="collapse" id="test"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> <p>Proin ut consequat est.....</p> <p>Vivamus id maximus mauris,....</p> <p>Integer suscipit interdum ...</p> <p>Pellentesque habitant....</p> </div> <button data-toggle="collapse" data-target="#demo">Collapsible</button> <div id="demo" class="collapse"> Lorem ipsum dolor text.... </div> </div> <div class="col-2 bg-warning"> </div> </div> </div> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script><script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> </body> </html> Link to comment Share on other sites More sharing options...
Karaethon Posted January 3, 2019 Author Share Posted January 3, 2019 This works though..... <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> </head> <body> <div class="container"> <h2>Simple Collapsible</h2> <p>Click on the button to toggle between showing and hiding content.</p> <div class="row"> <div class="col-5"> <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> Click </button> </div> <div class="col-7"> <div id="demo" class="collapse"> Lorem ipsum dolor... </div> </div> </div> </body> </html> Link to comment Share on other sites More sharing options...
requinix Posted January 4, 2019 Share Posted January 4, 2019 Bootstrap requires jQuery be loaded. Think about that and how your HTML is structured. Also, it's not too bad to put common CDNed assets (like jQuery and Bootstrap) in the <head>. Browsers may already have it cached so the loading time hit is less likely - plus you get the benefits of having the assets loaded early. Link to comment Share on other sites More sharing options...
Karaethon Posted January 4, 2019 Author Share Posted January 4, 2019 7 hours ago, requinix said: Bootstrap requires jQuery be loaded. Think about that and how your HTML is structured. Also, it's not too bad to put common CDNed assets (like jQuery and Bootstrap) in the <head>. Browsers may already have it cached so the loading time hit is less likely - plus you get the benefits of having the assets loaded early. I do have it in there .. I always had put my scripts at the end to speed page load, I never thought it might be cached but with bs and jq being so common nowadays I see your point. Do you think that's why it's failing? Link to comment Share on other sites More sharing options...
requinix Posted January 4, 2019 Share Posted January 4, 2019 1 hour ago, Karaethon said: I always had put my scripts at the end to speed page load, I never thought it might be cached but with bs and jq being so common nowadays I see your point. Do you think that's why it's failing? No. It doesn't work because yes, while you may have Bootstrap and jQuery being included, you have them being included in that order... Link to comment Share on other sites More sharing options...
Karaethon Posted January 4, 2019 Author Share Posted January 4, 2019 Ahh, so jQuery has to be first? And does it have to be before bs js or bot bs js & bs css? Link to comment Share on other sites More sharing options...
requinix Posted January 4, 2019 Share Posted January 4, 2019 I would put jQuery in the <head> since it's a rather important dependency and Bootstrap in the <body> since it's less important to have immediately. The CSS only goes in one place and it doesn't matter where it loads relative to your Javascript. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.