jquery アコーディオンをfadeInOutで実装したいのですがshow、hideの様になってしまう

前提・実現したいこと

Jqueryのアコーディオンを実装したいと思っております。クリックすると、選択されたメニューが表示され、もう一度クリックすると非表示になる機能です。また、その際にfadeInで表示させ、fadeOutで非表示にさせたいと思っています。
そこで実装のために、progateのアコーディオン実装コードを参考に記述したのですが、showの様に表示され、hideの様に非表示になります。

発生している問題・エラーメッセージ

そこで実装のために、progateのアコーディオン実装コードを参考に記述したのですが、showの様に表示され、hideの様に非表示になります。

補足情報（FW/ツールのバージョンなど）

もし、情報が不十分でしたら追加しますので、遠慮なく申しください。

html<head>と<script>部分を１枚目に載せました。
また、他のサイトのコードをコピペしても実装できませんでした。fadeIn,fadeOutが全体的にできない状態です。ですのでおそらく記述しているコードには問題はないと思います。パソコンや取り込んでいるcdnや取り込みファイルにも問題があるかもしれないと思っています。

html
1<head>
2    <!-- Required meta tags -->
3    <meta charset="utf-8">
4    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
5
6    <!-- Bootstrap CSS -->
7    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
8    <!-- font-family:caveat -->
9    <link href="https://fonts.googleapis.com/css?family=Caveat rel="stylesheet">
10    <!-- font-family:はんなり -->
11    <link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet"/>
12    <!-- favicon -->
13    <link rel="icon" href="./images/favicon.ico">
14    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.0/css/all.css">
15    <!-- swiper -->
16    <link rel="stylesheet" href="./css/swiper.min.css">
17    <link rel="stylesheet" href="./css/slick-theme.css">
18    <link rel="stylesheet" href="./css/slick.css">
19
20    <link rel="stylesheet" href="./css/reset.css">
21    <link rel="stylesheet" href="./css/style.css">
22    <title>fresh cafe</title>
23  </head>
24
25
26    <script src="https://ajax.googleapis.com/ajax/libs/d3js/6.2.0/d3.min.js"></script>
27    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
28    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
29    <script src="./js/scrollreveal.min.js"></script>
30    <script src="https://sdk.form.run/js/v2/formrun.js"></script>
31    <script src="./js/slick.js"></script>
32    <script src="./js/script.js"></script>
33    <script src="./js/swiper.min.js"></script>

html
1<div class="menus">
2          <div class="menu-title">
3            <h3>ドリンクメニュー一覧</h3>
4          </div>
5          <ul class="menu-lists">
6            <li class="menu-item row">
7              <p class="menu-name">フレッシュコーヒー</p><p class="menu-price">400円</p>
8            </li>
9            <li class="menu-item row">
10              <p class="menu-name">アメリカンコーヒー</p><p class="menu-price">450円</p>
11            </li>
12            <li class="menu-item row">
13              <p class="menu-name">ウィンナーコーヒー</p><p class="menu-price">450円</p>
14            </li>
15            <li class="menu-item row">
16              <p class="menu-name">カフェオレ</p><p class="menu-price">500円</p>
17            </li>
18            <li class="menu-item row">
19              <p class="menu-name">エスプレッソコーヒー</p><p class="menu-price">450円</p>
20            </li>
21            <li class="menu-item row">
22              <p class="menu-name">カフェラテ</p><p class="menu-price">350円</p>
23            </li>
24            <li class="menu-item row">
25              <p class="menu-name">カプチーノ</p><p class="menu-price">380円</p>
26            </li>
27            <li class="menu-item row">
28              <p class="menu-name">抹茶オレ</p><p class="menu-price">390円</p>
29            </li>
30          </ul>
31        </div>

css
1.menu-title{
2    text-align: center;
3    width: 70%;
4    max-width: 900px;
5    padding: 20px 0;
6    margin: 30px auto 0 auto;
7    box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
8}
9.menu-title h3{
10    font-size: 24px;
11    font-weight: bold;
12}
13.menu-title:hover{
14    color: #9F5F4D;
15    opacity: 0.7;
16    text-decoration: none;
17    cursor: pointer;
18}
19.menu-lists{
20    font-size: 16px;
21    margin-bottom: 20px;
22    padding:10px 50px 30px 50px;
23    max-width: 900px;
24    width: 70%;
25    margin: 0 auto;
26    box-shadow:  1px 1px 5px rgba(0,0,0,0.2);
27    display: none;
28}
29.open{
30    display: block;
31}
32.menu-item{
33    border-bottom: 2px groove rgba(221,158,138, 0.3);
34    padding-top: 15px;
35}
36.menu-name{
37    margin-right: auto;
38}
39.menu-price{
40    margin-left: auto;
41}

javascript
1$('.menus').click(function() {
2  var $menuLists = $(this).find('.menu-lists');
3  if($menuLists.hasClass('open')) { 
4    $menuLists.removeClass('open');
5    $menuLists.slideUp();
6  } else {
7    $menuLists.addClass('open'); 
8    $menuLists.slideDown();
9  }
10});
11