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

Question

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

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

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

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

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

<nav class="bl_hbMenu hp_sp">
                <div class="bl_header_lCont hp_flex">
                    <h1 class="hp_flex"><img src="<?php echo get_template_directory_uri(); ?>/lib/images/common/logo.png" alt="アイランドレンタカーロゴ"><span>サイト名</span></h1>
                </div>
                <ul class="bl_hbMenu_wrap">

                    <li>
                        <div class="bl_hbMenu_cont hp_flex">
                            <div class="bl_hbMenu_cont_inner hp_flex">
                                <img src="<?php echo get_template_directory_uri(); ?>/lib/images/common/menu_icon01.png" alt="車種・料金表">
                                <p class="bl_hbMenu_contFont hp_menu_fontColor">車種・料金表</p>
                            </div>
                            <span class="bl_hbMenu_cont_arrow is_hbToggle"></span>
                        </div>


                        <ul class="bl_hbMenu_cont_child">
                            <li class="hp_flex">
                                <a href="<?php echo esc_url(home_url()); ?>/cost_genera/" class="bl_hbMenu_contFont hp_menu_fontColor">一般の方</a>
                                <span class="bl_hbMenu_cont_arrow02"></span>
                            </li>
                            <li class="hp_flex">
                                <a href="<?php echo esc_url(home_url()); ?>/cost_corporate/" class="bl_hbMenu_contFont hp_menu_fontColor">法人の方</a>
                                <span class="bl_hbMenu_cont_arrow02"></span>
                            </li>
                        </ul>
                    </li>

                    <li>
                        <div class="bl_hbMenu_cont hp_flex">
                            <a href="<?php echo esc_url(home_url()); ?>/guid/"" class=" bl_hbMenu_cont_inner hp_flex">
                                <img src="<?php echo get_template_directory_uri(); ?>/lib/images/common/menu_icon02.png" alt="ご利用案内">
                                <p class="bl_hbMenu_contFont hp_menu_fontColor">ご利用案内</p>
                            </a>
                            <span class="bl_hbMenu_cont_arrow is_hbToggle"></span>
                        </div>


                        <ul class="bl_hbMenu_cont_child">
                            <li class="hp_flex">
                                <a href="<?php echo esc_url(home_url()); ?>//" class="bl_hbMenu_contFont hp_menu_fontColor">ご利用から返却まで</a>
                                <span class="bl_hbMenu_cont_arrow02"></span>
                            </li>
                            <li class="hp_flex">
                                <a href="<?php echo esc_url(home_url()); ?>//" class="bl_hbMenu_contFont hp_menu_fontColor">予約キャンセル・変更</a>
                                <span class="bl_hbMenu_cont_arrow02"></span>
                            </li>
                            <li class="hp_flex">
                                <a href="<?php echo esc_url(home_url()); ?>//" class="bl_hbMenu_contFont hp_menu_fontColor">予約サイトの使い方</a>
                                <span class="bl_hbMenu_cont_arrow02"></span>
                            </li>
                            <li class="hp_flex">
                                <a href="<?php echo esc_url(home_url()); ?>//" class="bl_hbMenu_contFont hp_menu_fontColor">事故・故障</a>
                                <span class="bl_hbMenu_cont_arrow02"></span>
                            </li>
                            <li class="hp_flex">
                                <a href="<?php echo esc_url(home_url()); ?>//" class="bl_hbMenu_contFont hp_menu_fontColor">交通違反</a>
                                <span class="bl_hbMenu_cont_arrow02"></span>
                            </li>
                            <li class="hp_flex">
                                <a href="<?php echo esc_url(home_url()); ?>//" class="bl_hbMenu_contFont hp_menu_fontColor">保険・補償内容</a>
                                <span class="bl_hbMenu_cont_arrow02"></span>
                            </li>
                        </ul>
                    </li>




                    <li>
                        <div class="bl_hbMenu_cont hp_flex">
                            <a class="bl_hbMenu_cont_inner hp_flex">
                                <img src="<?php echo get_template_directory_uri(); ?>/lib/images/common/menu_icon03.png" alt="キャンペーン">
                                <p class="bl_hbMenu_contFont hp_menu_fontColor03">キャンペーン</p>
                            </a>
                            <span class="bl_hbMenu_cont_arrow02"></span>
                        </div>
                    </li>

                    <li>
                        <div class="bl_hbMenu_cont hp_flex">
                            <a href="<?php echo esc_url(home_url()); ?>//" class="bl_hbMenu_cont_inner hp_flex">
                                <img src="<?php echo get_template_directory_uri(); ?>/lib/images/common/menu_icon04.png" alt="アイランドの強み">
                                <p class="bl_hbMenu_contFont  hp_menu_fontColor04">アイランドの強み</p>
                            </a>
                            <span class="bl_hbMenu_cont_arrow02"></span>
                        </div>
                    </li>
                
【省略・・・】

                </ul>
            </nav>

/* ナビ開いてる時のボタン */
  .el_hb.active span:nth-child(1) {
    top: 16px;
    left: 6px;
    transform: rotate(-45deg);
  }

  .el_hb.active span:nth-child(2),
  .el_hb.active span:nth-child(3) {
    top: 16px;
    transform: rotate(45deg);
  }

  /* ナビメニュー */
  .bl_hbMenu {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    color: #000;
    background: #fff;
    transform: translateY(-100%);
    transition: all 0.6s;
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
  }

  .bl_hbMenu .bl_header_lCont {
    padding: 2.7rem 2.3rem;
    width: 57rem;
  }

  .bl_hbMenu_wrap {
    background: #f2f1ec;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    padding: 3rem;
  }

  .bl_hbMenu_wrap li {
    list-style-type: none;
    padding: 0;
    width: 100%;
  }

  .bl_hbMenu_wrap li:hover {
    opacity: 0.8;
  }

  .bl_hbMenu_cont {
    padding: 3rem 0;
    border-bottom: 2px solid #cccccc;
  }

  .bl_hbMenu_cont_inner {
    width: 80%;
    justify-content: flex-start;
  }

  .bl_hbMenu_cont_inner img {
    width: 10rem;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    margin: 0 3rem 0 0;
  }

  .bl_hbMenu_contFont {
    font-size: 3.2rem;
    font-weight: bold;
  }

  .bl_hbMenu_wrap li a {
    display: inherit;
    padding: 1em 0;
    text-decoration: none;
  }

  .bl_hbMenu_cont_child {
    display: none;
  }

  .bl_hbMenu_cont_child li a {
    width: 80%;
    padding: 3rem 0 3rem 13rem;
  }

  .bl_hbMenu_cont_child li {
    border-bottom: 2px solid #cccccc;
  }

  .bl_hbMenu_cont_arrow {
    position: relative;
    display: inline-block;
    content: "";
    width: 4.1rem;
    height: 3rem;
    background: url(../images/common/hd_arrow.svg) no-repeat center;
    background-size: contain;
    /* transition: 0.3s; */
  }
  .bl_hbMenu_cont_arrow02 {
    position: relative;
    display: inline-block;
    content: "";
    width: 3rem;
    height: 4.2rem;
    background: url(../images/common/hd_arrow03.svg) no-repeat center;
    background-size: contain;
  }

  /* このクラスを、jQueryで付与・削除する */
  .bl_hbMenu.active {
    transform: translateY(0%);
  }
  .is_hbToggleActive {
    background: url(../images/common/hd_arrow02.svg) no-repeat center;
    background-size: contain;
  }
} /*spサイズ 768px以下ここまで*/

/*================================================
ハンバーガーメニュー
================================================*/
$(function () {
  $(".el_hb").click(function () {
    $(this).toggleClass("active");

    if ($(this).hasClass("active")) {
      $(".bl_hbMenu").addClass("active");
    } else {
      $(".bl_hbMenu").removeClass("active");
    }
  });
});

$(function () {
  $(".is_hbToggle").click(function () {
    $(".bl_hbMenu_cont_child").slideToggle();
  });
});

$(function () {
  $(".is_hbToggle").click(function () {
    $(this).toggleClass("is_hbToggleActive");

    if ($(this).hasClass("is_hbToggleActive")) {
      $(".is_hbToggle").addClass("is_hbToggleActive");
    } else {
      $(".is_hbToggle").removeClass("is_hbToggleActive");
    }
  });
});

Comments

[yambejp]

もう少しHTMLを単純化したサンプルから始めると良いでしょう
クラスの付加も煩雑になりすぎているように見受けられます