Bootstrap Navbar unable to collapse - html

Question

I would want to click the button in the header to expand the list of links, but it only expands, and unable to hide. What should I do to get it working normally?
Here is my code:
<!-- Navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<!-- This is where the button to collapse the list is -->
<img class="icon" alt="Brand" src="img/icon.ico">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapseBtn" aria-expanded="false" aria-controls="collapseBtn">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- This is the list I expect to collapse when I hit the button -->
<div class="collapse navbar-collapse in" id="collapseBtn">
<ul class="container-fluid nav navbar-nav pull-right">
<li><h4 class="navbar-items">Education</h4></li>
<li><h4 class="navbar-items">Experience</h4></li>
<li><h4 class="navbar-items">Skills</h4></li>
<li><h4 class="navbar-items">Contact Me</h4></li>
</ul>
</div>
</div>
</nav>

Answer 1

You have the class of in in your navbar-collapse causing it to remain open other than that your Code is working fine as you can see in the following fiddle
Fiddle
You will want to remove the class of in From your navbar-collapse and then if you are having trouble getting it to open you more than likely forgot to load jquery.js before loading bootstrap.js. So before your bootstrap javascript file you need to load the jquery javascript library. Bootstrap's javascript works off of jquery so you need to load the jquery library first. So before the bootstrap js script link add this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
then after that load your bootstrap js file
<script src="bootstrap.js"></script>