アコーディオンの初期状態の設定

実現したいこと

アコーディオンの初期状態を閉じた状態にしたいです。

前提

アコーディオンは実装できている状態です。
HTML

<ul class="qa-list-group">
          <!--質問１-->
          <li>
            <div class="q-group">
              <h2 class="q-bag">Q.</h2>
              <p class="q-text">●●●●●？</p>
              <div class="icon-wrap"><span class="icon"></span></div>
            </div>
            <div class="a-group">
              <h2 class="a-bag">A.</h2>
              <p class="a-text">○○○○。</p>
            </div>
          </li>
</ul>

CSS

.qa-list-group {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
}

.qa-list-group > li {
  padding-bottom: 6px;
  list-style: none;
}
.q-group{
  cursor: pointer;
  text-align: center;
  position: relative;

  display: flex;
  flex-direction: row;
  width: 90%;
  border-bottom: 0.1rem solid #0097a7;
}

.q-bag{
  font-size: 1.5rem;
  color: #0097a7;
  font-family: 'Noto Serif JP', serif;
}

.q-text{
  width: 80%;
  font-size: 1rem;
  color: #0097a7;
  text-align: start;
}

.a-group{
  width: 90%;
  display: flex;
  flex-direction: row;
}

.a-bag{
  font-size: 1.5rem;
  font-family: 'Noto Serif JP', serif;
}

.a-text{
  width: 80%;
  font-size: 1rem;
  text-align: start;
}

.icon-wrap {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translatey(-50%);
  width: 2rem;
  height: 2rem;
  background: #0097a7;
}

.icon {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}

jQuery

//アコーディオン
$(function () {
  $('.q-group').click(function () {
    $(this).next('div').slideToggle();
    $(this).find(".icon").toggleClass('open');
  });
});

試したこと

a-groupにdisplay:none;を追加すると非表示にはなるのですが、
display:flex;が無効になってしまいます。

.a-group{
  width: 90%;
  display: flex;
  flex-direction: row;

  display: none; /* 初期状態は非表示 */

}

回答1件

ベストアンサー

案1

現在のHTML/CSS構成で一番簡単なのは下記です。（元のCSSを使用）
ただし、一瞬出てしまうデメリットがあります。

js
1$(function () {
2  $('.q-group').next('div').hide(); //追加
3  $('.q-group').click(function () {
4    $(this).next('div').slideToggle();
5    $(this).find(".icon").toggleClass('open');
6  });
7});

案2

試したことのCSSを活かして、
HTMLを変えない場合は、やや強引ですが下記で行けます。（試したことのCSSを使用）

js
1$(function () {
2  $('.q-group').click(function () {
3    $(this).next('div').slideToggle().css('display', 'flex');  //.css以降を追加
4    $(this).find(".icon").toggleClass('open');
5  });
6});