Currently, I am working on an accordion menu that slides up and down when clicked. While I have been successful in achieving the functionality, I am facing a challenge with implementing a smooth animation effect that smoothly slides from top to bottom and vice versa when displaying and hiding the menu content.
Although I have experimented with jQuery functions like slideUp() and slideDown(), my goal is to accomplish this through pure JavaScript. Here is a snippet of my code:
let k = 0;
let rightArrow = $(".fa-arrow-down");
$(".accordian-hover").click(() => {
if (k == 0) {
$(".accordian-content").style.display = "block";
k = 1;
rightArrow.classList.toggle("fa-arrow-down fa-arrow-up");
} else {
$(".accordian-content").style.display = "none";
k = 0;
rightArrow.classList.toggle("fa-arrow-up fa-arrow-down");
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordian-wrapper">
<div class="accordian-hover d-flex flex-row justify-content-center align-items-center container">
<div id="accordian-question-div">
<h5>How to use this product ?</h5>
</div>
<div>
<i class="fa fa-solid fa-arrow-down"></i>
</div>
</div>
<div class="accordian-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt iste est sunt? Excepturi quas, sunt recusandae laboriosam eligendi cum autem. Tempora nulla, at sequi minima praesentium, explicabo ullam eius odio corporis optio autem pariatur consequuntur,
rem voluptate soluta exercitationem natus quod repudiandae. Reprehenderit vitae, iste facere aspernatur minima modi repellat!</p>
</div>
</div>