Bootstrap Dropdown and CDN Issue

1

I don’t know why my dropdown buttons are no longer working. Everything was fine yesterday, but when I opened my project a couple of hours ago they no longer toggle. I’m kicking myself for not using a git repo.

I feel like it’s something related to the CDNs I’m using. I’ve tried using the same ones from demo sites like W3 or suggestions on stockoverflow, but nothing is working anymore.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>

<!--   MY DROPDOWN    -->    
<button type="button" data-toggle="collapse" data-target="#test-area" class="btn btn-warning btn-block btn-md"><span class="glyphicon glyphicon-menu-down"></span>Trial</button>
            <div id="test-area" class="collapse">
                <p>Duis doctrina qui instituendarum. Non quid dolore qui cernantur, occaecat cillum nam consequat domesticarum et est quo firmissimum e ne te arbitrantur.</p>
            </div>


<!--   EXTERNAL DEMO 1    -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">JavaScript</a></li>
</ul>
  </div> 

<!--   EXTERNAL DEMO 2    -->    
<div class="dropdown">
  <!-- Link or button to toggle dropdown -->
    <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>


</body>
</html>
2

You forgot to add jQuery. Bootstrap needs it for some functionality like a dropdown. Make sure to add it before the bootstrap.js file.

1 Like
3

That was it. Thanks a ton!