Jump to content
Karaethon

I can't find the problem...

Recommended Posts

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">
          &nbsp;
          <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">&nbsp;</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>

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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...

Share this post


Link to post
Share on other sites

Ahh, so jQuery has to be first? And does it have to be before bs js or bot bs js & bs css?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.