Having some trouble getting this div to slide down smoothly when the button is clicked. The animation seems to glitch whenever the div opens or closes.
I've attempted adding position:relative and overflow:hidden, but it doesn't seem to be doing the trick (keep in mind I'm also using Bootstrap).
$(document).ready(function(){
$(".faqOuter").click(function(){
$(".faqInner").slideToggle("slow");
});
});p{
vertical-align: middle;
margin: 0 !important;
}
.faqOuter{
color: white;
background-color: #262626;
text-align: center;
font-size: 20px !important;
height: 30px;
border: solid;
border-color: #262626;
padding: 0 0 5px 0;
}
.faqInner{
padding: 40px 35px 40px 40px !important;
position: relative !important;
border: solid;
border-color: #F3F3F3;
display: none;
overflow: hidden;
min-height: 0px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class="faqOuter col-md-8 col-md-offset-2">Trial One Bar</h4>
<div class="faqInner col-md-12">
<p>Alienum phaedrum torquatos nec eu, vis detraxit periculis ex, nihil expetendis in mei.</p>
</div>