I currently have an issue where i'm using max-height to animate drop down FAQ's
My issue is, because there is a fixed max-height on the active class, if they FAQ answer is way shorter than the max-height, the animation is delayed
How can I calculate the height of the answer div and set the max-height to the correct height value, to smooth out the animation
Code
<div class="faq_card">
<i class="material-icons drop_down">expand_more</i>
<p class="bold">Question?</p>
<div class="answer">
<p>Answer</p>
</div>
</div>
CSS:
Code
.answer {
max-height: 0;
display: block;
overflow: hidden;
visibility: hidden;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.answer.show {
max-height: 600px;
visibility: visible;
}
Javascript Code:
Code
$('.faq_card').click(function () {
$(this).find('.answer').toggleClass('show');
$(this).find('.drop_down').toggleClass('active');
});
This post was edited by Strickland on Mar 9 2022 05:37pm