js　アコーディオンをクリックすると複数のタブが開いてしまう。

js初学者です。
現在、アコーディオンの作成で困っている箇所があり、どうしても解決ができ無いため質問させていただきます。

【解決したい内容】
①、SP表示のハンバーガーメニュー内、アコーディオンにしている箇所の矢印をクリックすると、アコーディオンにしている全てのタブが開いてしまう。
これを、1つづつ開くようにしたい。
②、1つ開いたら、他のアコーディオンを自動で閉じるようにしたい。
③、アコーディオンにしている箇所の矢印も同時に動いてしまうので、開いている箇所だけ動くようにしたい。

知識が無く、調べながら作りましたが、この３つだけがどうしても解決でき無いため、ご教示いただけますと幸甚です。

【状況画像】
下記が閉じている状態です。

【状況画像】
下記が一つアコーディオンのタブを開いた時の状態です。（全てのアコーディオンが開いてしまい、矢印も全て動いてしまう。）

HTML
1<nav class="bl_hbMenu hp_sp">
2                <div class="bl_header_lCont hp_flex">
3                    <h1 class="hp_flex"><img src="<?php echo get_template_directory_uri(); ?>/lib/images/common/logo.png" alt="アイランドレンタカーロゴ"><span>サイト名</span></h1>
4                </div>
5                <ul class="bl_hbMenu_wrap">
6
7                    <li>
8                        <div class="bl_hbMenu_cont hp_flex">
9                            <div class="bl_hbMenu_cont_inner hp_flex">
10                                <img src="<?php echo get_template_directory_uri(); ?>/lib/images/common/menu_icon01.png" alt="車種・料金表">
11                                <p class="bl_hbMenu_contFont hp_menu_fontColor">車種・料金表</p>
12                            </div>
13                            <span class="bl_hbMenu_cont_arrow is_hbToggle"></span>
14                        </div>
15
16
17                        <ul class="bl_hbMenu_cont_child">
18                            <li class="hp_flex">
19                                <a href="<?php echo esc_url(home_url()); ?>/cost_genera/" class="bl_hbMenu_contFont hp_menu_fontColor">一般の方</a>
20                                <span class="bl_hbMenu_cont_arrow02"></span>
21                            </li>
22                            <li class="hp_flex">
23                                <a href="<?php echo esc_url(home_url()); ?>/cost_corporate/" class="bl_hbMenu_contFont hp_menu_fontColor">法人の方</a>
24                                <span class="bl_hbMenu_cont_arrow02"></span>
25                            </li>
26                        </ul>
27                    </li>
28
29                    <li>
30                        <div class="bl_hbMenu_cont hp_flex">
31                            <a href="<?php echo esc_url(home_url()); ?>/guid/"" class=" bl_hbMenu_cont_inner hp_flex">
32                                <img src="<?php echo get_template_directory_uri(); ?>/lib/images/common/menu_icon02.png" alt="ご利用案内">
33                                <p class="bl_hbMenu_contFont hp_menu_fontColor">ご利用案内</p>
34                            </a>
35                            <span class="bl_hbMenu_cont_arrow is_hbToggle"></span>
36                        </div>
37
38
39                        <ul class="bl_hbMenu_cont_child">
40                            <li class="hp_flex">
41                                <a href="<?php echo esc_url(home_url()); ?>//" class="bl_hbMenu_contFont hp_menu_fontColor">ご利用から返却まで</a>
42                                <span class="bl_hbMenu_cont_arrow02"></span>
43                            </li>
44                            <li class="hp_flex">
45                                <a href="<?php echo esc_url(home_url()); ?>//" class="bl_hbMenu_contFont hp_menu_fontColor">予約キャンセル・変更</a>
46                                <span class="bl_hbMenu_cont_arrow02"></span>
47                            </li>
48                            <li class="hp_flex">
49                                <a href="<?php echo esc_url(home_url()); ?>//" class="bl_hbMenu_contFont hp_menu_fontColor">予約サイトの使い方</a>
50                                <span class="bl_hbMenu_cont_arrow02"></span>
51                            </li>
52                            <li class="hp_flex">
53                                <a href="<?php echo esc_url(home_url()); ?>//" class="bl_hbMenu_contFont hp_menu_fontColor">事故・故障</a>
54                                <span class="bl_hbMenu_cont_arrow02"></span>
55                            </li>
56                            <li class="hp_flex">
57                                <a href="<?php echo esc_url(home_url()); ?>//" class="bl_hbMenu_contFont hp_menu_fontColor">交通違反</a>
58                                <span class="bl_hbMenu_cont_arrow02"></span>
59                            </li>
60                            <li class="hp_flex">
61                                <a href="<?php echo esc_url(home_url()); ?>//" class="bl_hbMenu_contFont hp_menu_fontColor">保険・補償内容</a>
62                                <span class="bl_hbMenu_cont_arrow02"></span>
63                            </li>
64                        </ul>
65                    </li>
66
67
68
69
70                    <li>
71                        <div class="bl_hbMenu_cont hp_flex">
72                            <a class="bl_hbMenu_cont_inner hp_flex">
73                                <img src="<?php echo get_template_directory_uri(); ?>/lib/images/common/menu_icon03.png" alt="キャンペーン">
74                                <p class="bl_hbMenu_contFont hp_menu_fontColor03">キャンペーン</p>
75                            </a>
76                            <span class="bl_hbMenu_cont_arrow02"></span>
77                        </div>
78                    </li>
79
80                    <li>
81                        <div class="bl_hbMenu_cont hp_flex">
82                            <a href="<?php echo esc_url(home_url()); ?>//" class="bl_hbMenu_cont_inner hp_flex">
83                                <img src="<?php echo get_template_directory_uri(); ?>/lib/images/common/menu_icon04.png" alt="アイランドの強み">
84                                <p class="bl_hbMenu_contFont  hp_menu_fontColor04">アイランドの強み</p>
85                            </a>
86                            <span class="bl_hbMenu_cont_arrow02"></span>
87                        </div>
88                    </li>
89                
90【省略・・・】
91
92                </ul>
93            </nav>

CSS
1/* ナビ開いてる時のボタン */
2  .el_hb.active span:nth-child(1) {
3    top: 16px;
4    left: 6px;
5    transform: rotate(-45deg);
6  }
7
8  .el_hb.active span:nth-child(2),
9  .el_hb.active span:nth-child(3) {
10    top: 16px;
11    transform: rotate(45deg);
12  }
13
14  /* ナビメニュー */
15  .bl_hbMenu {
16    position: fixed;
17    z-index: 2;
18    top: 0;
19    left: 0;
20    color: #000;
21    background: #fff;
22    transform: translateY(-100%);
23    transition: all 0.6s;
24    width: 100%;
25    height: 100vh;
26    overflow-y: scroll;
27  }
28
29  .bl_hbMenu .bl_header_lCont {
30    padding: 2.7rem 2.3rem;
31    width: 57rem;
32  }
33
34  .bl_hbMenu_wrap {
35    background: #f2f1ec;
36    margin: 0 auto;
37    padding: 0;
38    width: 100%;
39    padding: 3rem;
40  }
41
42  .bl_hbMenu_wrap li {
43    list-style-type: none;
44    padding: 0;
45    width: 100%;
46  }
47
48  .bl_hbMenu_wrap li:hover {
49    opacity: 0.8;
50  }
51
52  .bl_hbMenu_cont {
53    padding: 3rem 0;
54    border-bottom: 2px solid #cccccc;
55  }
56
57  .bl_hbMenu_cont_inner {
58    width: 80%;
59    justify-content: flex-start;
60  }
61
62  .bl_hbMenu_cont_inner img {
63    width: 10rem;
64    height: auto;
65    -o-object-fit: cover;
66    object-fit: cover;
67    margin: 0 3rem 0 0;
68  }
69
70  .bl_hbMenu_contFont {
71    font-size: 3.2rem;
72    font-weight: bold;
73  }
74
75  .bl_hbMenu_wrap li a {
76    display: inherit;
77    padding: 1em 0;
78    text-decoration: none;
79  }
80
81  .bl_hbMenu_cont_child {
82    display: none;
83  }
84
85  .bl_hbMenu_cont_child li a {
86    width: 80%;
87    padding: 3rem 0 3rem 13rem;
88  }
89
90  .bl_hbMenu_cont_child li {
91    border-bottom: 2px solid #cccccc;
92  }
93
94  .bl_hbMenu_cont_arrow {
95    position: relative;
96    display: inline-block;
97    content: "";
98    width: 4.1rem;
99    height: 3rem;
100    background: url(../images/common/hd_arrow.svg) no-repeat center;
101    background-size: contain;
102    /* transition: 0.3s; */
103  }
104  .bl_hbMenu_cont_arrow02 {
105    position: relative;
106    display: inline-block;
107    content: "";
108    width: 3rem;
109    height: 4.2rem;
110    background: url(../images/common/hd_arrow03.svg) no-repeat center;
111    background-size: contain;
112  }
113
114  /* このクラスを、jQueryで付与・削除する */
115  .bl_hbMenu.active {
116    transform: translateY(0%);
117  }
118  .is_hbToggleActive {
119    background: url(../images/common/hd_arrow02.svg) no-repeat center;
120    background-size: contain;
121  }
122} /*spサイズ 768px以下ここまで*/

js
1/*================================================
2ハンバーガーメニュー
3================================================*/
4$(function () {
5  $(".el_hb").click(function () {
6    $(this).toggleClass("active");
7
8    if ($(this).hasClass("active")) {
9      $(".bl_hbMenu").addClass("active");
10    } else {
11      $(".bl_hbMenu").removeClass("active");
12    }
13  });
14});
15
16$(function () {
17  $(".is_hbToggle").click(function () {
18    $(".bl_hbMenu_cont_child").slideToggle();
19  });
20});
21
22$(function () {
23  $(".is_hbToggle").click(function () {
24    $(this).toggleClass("is_hbToggleActive");
25
26    if ($(this).hasClass("is_hbToggleActive")) {
27      $(".is_hbToggle").addClass("is_hbToggleActive");
28    } else {
29      $(".is_hbToggle").removeClass("is_hbToggleActive");
30    }
31  });
32});