繰り替えされるslideToggle();とtoggleClass();

閲覧ありがとうございます。
下記問題に対してご教授いただけますと幸いです。

前提・実現したいこと

閉じるボタン押下後に繰り替えされるslideToggle();とtoggleClass();の問題を解決したいです。
フィルターコンテンツを開いた1回目とn回目、どちらでもプルダウンが閉じている際に押下したら開く、
プルダウンが開いていれば押下したら閉じるの挙動にしたいと思っております。

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

フィルターコンテンツを閉じるボタンで閉じた後、
再度開いた際にフィルターのプルダウン項目を開こうとすると、自動的に開いて閉じてしまう現象が発生しています。
slideToggle();とtoggleClass();で同様の現象が同時に起きております。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="icon" href="favicon.ico">
8    <title>index</title>
9    <!-- jQuery -->
10    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
11  </head>
12  <body>
13    <div id="filters_page" class="filters_page">
14      <div class="filters_page_contents">
15        <div class="close_button"></div>
16        <form action="#" method="post" style="height: 100%">
17          <ul class="filters_index_list">
18            <li class="filters_index_list_item border_animation">
19              <div class="filters_select_index_wrapper fadein_animation">
20                <p class="filters_select_index text_animation">サイズ</p>
21                <div class="v_shaped_arrow"></div>
22              </div>
23              <div class="filters_select_list_wrapper">
24                <ul class="filters_select_list">
25                  <li class="filters_select_list_item">
26                    <label>
27                      <input type="checkbox" name="size01" value="size01" class="filters_checkbox">
28                      <p class="filters_select_list_item_index"><span class="deselection"></span>S<span class="filter_fit_num">5</span></p>
29                    </label>
30                  </li>
31                  <li class="filters_select_list_item">
32                    <label>
33                      <input type="checkbox" name="size02" value="size02" class="filters_checkbox">
34                      <p class="filters_select_list_item_index"><span class="deselection"></span>M<span class="filter_fit_num">20</span></p>
35                    </label>
36                  </li>
37                  <li class="filters_select_list_item">
38                    <label>
39                      <input type="checkbox" name="size03" value="size03" class="filters_checkbox">
40                      <p class="filters_select_list_item_index"><span class="deselection"></span>L<span class="filter_fit_num">10</span></p>
41                    </label>
42                  </li>
43                  <li class="filters_select_list_item">
44                    <label>
45                      <input type="checkbox" name="size04" value="size04" class="filters_checkbox">
46                      <p class="filters_select_list_item_index"><span class="deselection"></span>XL<span class="filter_fit_num">7</span></p>
47                    </label>
48                  </li>
49                  <li class="filters_select_list_item">
50                    <label>
51                      <input type="checkbox" name="size05" value="size05" class="filters_checkbox">
52                      <p class="filters_select_list_item_index"><span class="deselection"></span>XXL<span class="filter_fit_num">2</span></p>
53                    </label>
54                  </li>
55                  <li class="filters_select_list_item">
56                    <label>
57                      <input type="checkbox" name="size06" value="size06" class="filters_checkbox">
58                      <p class="filters_select_list_item_index"><span class="deselection"></span>XXXL<span class="filter_fit_num">2</span></p>
59                    </label>
60                  </li>
61                </ul>
62              </div>
63            </li>
64            <li class="filters_index_list_item border_animation">
65              <div class="filters_select_index_wrapper fadein_animation">
66                <p class="filters_select_index text_animation">フィット</p>
67                <div class="v_shaped_arrow"></div>
68              </div>
69              <div class="filters_select_list_wrapper">
70                <ul class="filters_select_list">
71                  <li class="filters_select_list_item">
72                    <label>
73                      <input type="checkbox" name="fit01" value="fit01" class="filters_checkbox">
74                      <p class="filters_select_list_item_index"><span class="deselection"></span>Tailored<span class="filter_fit_num">5</span></p>
75                    </label>
76                  </li>
77                  <li class="filters_select_list_item">
78                    <label>
79                      <input type="checkbox" name="fit02" value="fit02" class="filters_checkbox">
80                      <p class="filters_select_list_item_index"><span class="deselection"></span>Classic Fit<span class="filter_fit_num">8</span></p>
81                    </label>
82                  </li>
83                  <li class="filters_select_list_item">
84                    <label>
85                      <input type="checkbox" name="fit03" value="fit03" class="filters_checkbox">
86                      <p class="filters_select_list_item_index"><span class="deselection"></span>Slim Fit<span class="filter_fit_num">12</span></p>
87                    </label>
88                  </li>
89                  <li class="filters_select_list_item">
90                    <label>
91                      <input type="checkbox" name="fit04" value="fit04" class="filters_checkbox">
92                      <p class="filters_select_list_item_index"><span class="deselection"></span>Tapered Fit<span class="filter_fit_num">1</span></p>
93                    </label>
94                  </li>
95                  <li class="filters_select_list_item">
96                    <label>
97                      <input type="checkbox" name="fit05" value="fit05" class="filters_checkbox">
98                      <p class="filters_select_list_item_index"><span class="deselection"></span>Mid Fit<span class="filter_fit_num">10</span></p>
99                    </label>
100                  </li>
101                </ul>
102              </div>
103            </li>
104          </ul>
105          <div class="application_area">
106            <button type="button" name="filters_application" class="filters_application_button fadein_animation">絞り込み</button>
107          </div>
108        </form>
109      </div>
110    </div>
111    <script type="text/javascript" src="js/product_list.js"></script>
112  </body>
113</html>

jQuery
1      var filtersPage = $('#filters_page');
2      var applicationArea = $('.application_area');
3      var closeButton = $('#filters_page .close_button');
4      //プルダウン押下時、filter選択のコンテンツを表示
5      $('#filters_page .filters_select_index_wrapper').on('click', function(){
6        var pulldownIndexClick = $('.filters_select_index_wrapper').index(this);
7        $(this).toggleClass('open');
8        $(this).slideToggle(400);
9      });
10      //閉じるボタン押下時、filterページ閉じる表示
11      $('#filters_page .close_button').on('click', function(){
12        filtersPage.css('display', 'none');
13        filtersPage.removeClass('open');
14        $('html').css('overflow', '');
15      });

試したこと

toggleがいけないのかと思い、if文でも記載をしてみましたが、特に現象に変わりはありませんでした...

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

jquery 3.6

yambejp

2022/01/12 10:39

閉じるボタンがどこなのかわかりません。もう少しわかりやすい例はないのでしょうか？

nagano0141cafe

2022/01/13 00:17

申し訳ございません。 CSSを追記しようとしましたが、本質問、もしくはteratailがバグっているのか、質問編集の際の変更点記載欄でエラーを吐かれており（既定の文字数以上で記載してもダメ）編集が不可能な状況です... 上記現象の為、質問はしばらく様子を見ようかと思いますので、自分で1から作り直してみます。