アコーディオン　一括に開く/閉じる　が順番通りになるように実装したいです

前提

jQueryを利用してアコーディオンメニューを作成中です。

実現したいこと

①質問それぞれ個別でも開閉可能
②一括で　開く/閉じる　を実装（順番通りに）

発生している問題

実現したいこと② の　一括で　開く/閉じる　は出来たのですが、

■全て一括で開いた後に、質問を一つずつ閉じた場合、
再び【すべて開く】と表示させたいのですが、現状は【すべて閉じる】のまま

■反対に、先に質問を一つずつ開いて、全部一括で閉じたい場合、【すべて閉じる】と表示させたいのですが、現状は【すべて開く】のまま
なので、順番が狂ってしまいます。

例えば動作終了後、クリックなどで【すべて開く】【すべて閉じる】が順番通りになる
解決策はありますでしょうか？
どうかご教授お願いいたします。

該当のソースコード

html
1<section id="faq" class="">
2<!-- 上の段 -->
3    <div class="accordion">
4      <h3>カテゴリー名が入ります</h3>
5      <h5 class="expand-all openall ">
6        <a href="javascript:void(0);">すべて開く</a>
7      </h5>
8      <dl>
9        <dt class="open"><span>Q.</span>駅から近いですか？</dt>
10        <dd>
11          <span>A.</span>はい。駅から1分です。
12        </dd>
13      </dl>
14      <dl>
15        <dt class="open"><span>Q.</span>駐車場はありますか？</dt>
16        <dd>
17          <span>A.</span>はい！たくさんありますよ
18        </dd>
19      </dl>
20    </div>
21<!--   下の段 -->
22    <div class="accordion">
23      <h3>カテゴリー名が入ります</h3>
24      <h5 class="expand-all openall ">
25        <a href="javascript:void(0);">すべて開く</a>
26      </h5>
27      <dl>
28        <dt class="open"><span>Q.</span>駅から近いですか？</dt>
29        <dd>
30          <span>A.</span>はい。駅から1分です。
31        </dd>
32      </dl>
33      <dl>
34        <dt class="open"><span>Q.</span>駐車場はありますか？</dt>
35        <dd>
36          <span>A.</span>はい！たくさんありますよ
37        </dd>
38      </dl>
39    </div>
40</section>

css
1
2
3.accordion {
4  margin: 64px auto 0;
5  position: relative;
6  
7 
8  h3 {
9    font-size: 24px;
10    text-align: left;
11    border-bottom: 1px solid black;
12    padding-bottom: 32px;
13  }
14  h5{
15    text-align:right;
16  }
17     
18  dl {
19    cursor: pointer;
20    dt {
21      position: relative;
22      font-size: 18px;
23      line-height: 1.6;
24      text-align: left;
25      font-weight: 500;
26      padding: 20px 20px 20px 48px;
27      border-bottom: 1px solid gray;
28      span {
29        display: inline-block;
30        -webkit-transform: translateY(-1px);
31        transform: translateY(-1px);
32        text-indent: -1.5em;
33        font-weight: bold;
34      }
35
36      &:before,
37      &:after {
38        position: absolute;
39        content: "";
40        display: block;
41        -webkit-transition: all 0.4s;
42        transition: all 0.4s;
43        background: black;
44        right: 16px;
45        top: 48%;
46        width: 14px;
47        height: 2px;
48      }
49      &:before {
50        top: 48%;
51        right: 10px;
52        transform: rotate(0deg);
53      }
54      &:after {
55        top: 48%;
56        right: 10px;
57        transform: rotate(90deg);
58      }
59    }
60
61    dd {
62      display: none;
63      font-size: 15px;
64      line-height: 1.6;
65      text-align: left;
66      font-weight: 500;
67      padding: 24px 88px 88px 88px;
68      border-bottom: 1px solid black;
69      span {
70        display: inline-block;
71        -webkit-transform: translateY(-1px);
72        transform: translateY(-1px);
73        text-indent: -1.5em;
74        font-weight: bold;
75      }
76    }
77
78    dt.close:after {
79      transform: rotate(180deg);
80    }
81  }
82    }

jQuery
1$(document).ready(function () {
2  $(".accordion dt").addClass("open");
3  $(".accordion dt").click(function () {
4    if (!$(this).hasClass("close")) {
5      $(this).removeClass("open");
6      $(this).addClass("close");
7    } else {
8      $(this).addClass("open");
9      $(this).removeClass("close");
10    }
11
12    $(this).next().slideToggle(300);
13  });
14
15  $(".accordion .expand-all").addClass("openall");
16
17  $(".accordion .expand-all").click(function () {
18    if (!$(this).hasClass("closeall")) {
19      $(this).removeClass("openall");
20      $(this).addClass("closeall");
21
22      $(this).find("a").html("すべて閉じる");
23    } else {
24      $(this).removeClass("closeall");
25      $(this).addClass("openall");
26      $(this).find("a").html("すべて開く");
27    }
28
29    $(this).parent().find("dt").trigger("click");
30    $(this).parent().find(".accordion .expand-all").trigger("click");
31  });
32});