我正在创建一个 accordion 菜单，点击它可以上下滑动。我能够获得功能，但无法获得动画效果，即在显示和隐藏菜单内容时从上到下和从下到上平滑滑动。
我尝试过slideUP（）和slideDown（）这样的jQuery函数，但我想通过javascript实现它。

<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");

  }


});