How to add sliding effect for accordion menu in Javascript?

I am creating an accordion menu which slides up and down on clicking on it. I am able to get the functionality but couldn’t get the animation effect that slides smoothly from top to bottom and bottom to top while showing and hiding the menu content.

I’ve tried jQuery functions like slideUP() and slideDown() but I want to achieve it through javascript.
Here is my code..

<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>

let k=0;
let rightArrow=$(".fa-arrow-down");
$(".accordian-hover").click(() => {

  if (k==0) {
    $(".accordian-content").show();
    k=1;
    rightArrow.toggleClass("fa-arrow-down fa-arrow-up");
  }
  else{
    $(".accordian-content").hide();
    k=0;
    rightArrow.toggleClass("fa-arrow-up fa-arrow-down");

  }



});