Why is this collapse stopping in half before collapsing completely?
I have 5 divs collapsing at once, could that be the issue? The example on W3 schools works fine... Should I consider changing the collapse to a panel instead?
Visit W3 Schools for more information
The code I used from there seems to work fine.
$(document).ready(function() {
$(".logo-area").click(function() {
$(this).toggleClass("new-p");
});
});#collapseOne {
width: 100%;
padding-top: 7%;
padding-bottom: 5%;
z-index: 200;
position: fixed;
background-color: #F4F4F4;
color: black;
text-align: center;
}
#collapseOne div {
display: inline-block;
margin: 3%;
}
#collapseOne p {
font-weight: bold;
font-size: 36px;
color: black;
}
#collapseOne span {
color: black;
}
#collapseOne hr {
width: 50%;
background-color: black;
}
.new-p {
color: black;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="logo-area" id="fixedButton" for="collapseOne" data-toggle="collapse"
href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<input type="image" src="images/creabaco-log2.png">
<p class="logo-p">crebaco</p>
</div>
<div class="collapse" id="collapseOne">
<div>
<a href="index.html">
<p>Crebaco.</p>
<span>Overview.</span>
<hr>
</a>
</div>
<div>
<a href="test.html">
<p>Services.</p>
<span>What we do.</span>
<hr>
</a>
</div>
<div>
<a href="about.html">
<p>About.</p>
<span>Who we are.</span>
<hr>
</a>
</div>
</div>