アコーディオンの実装ができずヒントをいただけましたら幸いです

Question

前提

jQueryで、よくあるアコーディオンメニューを作成しています。項目を押すと＋ボタンがマイナスに変わり、下に回答がスライドで出てくるアコーディオンメニューです。何度か同じようなものを作成したことがあり今回もそれに習って作成したのですが、どうしても動かず、どこに原因がありそうか教えていただけましたら幸いです。

実現したいこと

アコーディオン作成

該当のソースコード

  <section class="other">
      <div class="contents_width">
        <h3>A</h3>  
          <div class="other_acd">
            <dl class="first open">
              <dt class="shadow">テキスト</dt>
              <dd>テキストテキスト</dd>
            </dl>  
            <dl class="open">
              <dt class="shadow">テキスト</dt>
              <dd>テキストテキスト</dd>
            </dl>          
          </div>  
      </div>
    </section> 

.other{
  margin: 17.5rem 0 0 0;
  padding: 3.2rem 0 10rem 0;
}

.other .first{
  margin-top: 4.7rem;
}

.other_acd dt{
  color: #000;
  font-size: 2.4rem;
  font-weight: 700;
  background: linear-gradient(to right, #f6f3dc 0%, #f6efb8 70% ,#e6dfad 100%);
  padding: 1.4rem 0 1.4rem 5rem;
  margin-top: 3rem;
  position:relative;
}

.other_acd dt::after{
  text-align: center;
  line-height: 1.7;
  content: "－";
  position: absolute;
  top: 0.9rem;
  right: 5rem;
  background-color: #0097a7;
  background: linear-gradient(to right, #ebe4af 0%,#e6dfad 100%);
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  border: 1px solid;
}

.other_acd dd{
  color: #000;
  background-color: #fff;
  padding: 2.4rem 6rem 2.4rem 5.1rem;
  margin-top: 1rem;
  line-height: calc(28/16);
  display: none;
  
}

.other_acd dl.open dt::after {
    content: '＋';
}

$(".other_acd dt").on("click",function () {
  $(this).parent().toggleClass("open");
  $(this).next().slideToggle();
});

試したこと

console.log等で動くか確認→反応しないので、恐らく要素の捕まえ方に問題があると認識はしております。クリックする要素にクラス名をつけたり、要素の絞り方を変えたり色々試してみました。googleでも相当調べました。また、他のjQueryでの処理は動いているので読み込みに問題はないと思います。

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

ここにより詳細な情報を記載してください。

Comments

[hatena19]

提示のコードで問題なく動作してます。
提示されていいない部分に問題があると思います。
こちらでも再現できるコードを提示してください。

[mari0123]

早速のご返信ありがとうございます。動作問題ないのですね・・！再現できるコードとは、どのようなものを提示すればよろしいでしょうか。全体を開示することができず、また初心者のため的を得ないご返信で申し訳ございません。提示されていない部分に問題がありそうということですが、見当がつかず、考えられることは何かございますでしょうか。

[hatena19]

再現できるコードというのは、質問の症状が再現できるコードつまり、動作しないコードということです。質問のコードは問題なく動作しますので、それだけでは原因の特定は不可能です。
公開可能なら、その症状の出ているURLを提示していただければ、原因特定できるかもしれません。

とりあえず、ブラウザの検証ツールで、エラーメッセージが出ていないか確認してみてはどうでしょう。

[Lhankor_Mhy]

当方でも問題なく動作しました。

---

「再現できるコード」をどうやって作るかですが、たとえば、以下の様な手順はどうですか？

①　HTMLからフッターを削除してみて、それでも問題が再現するかどうか確認する。
②　①で問題が再現しないのであればフッターに原因がある可能性があるので、フッター以外を削除してみる。 以下、①に戻って別の部分を削除するを繰り返す。
③　①で問題が再現するのであればフッターは関係ないので「現象を再現するための、より小さいプログラム」ができたことになる。以下、①に戻って別の部分を削除するを繰り返す。

[mari0123]

お二方アドバイスいただきまして誠にありがとうございます！今、最小限まで削減し、再度動くか確認しましたが、やはりこちらの方では動きません。コードは下記に記載しました。内容ご確認をいただけましたら誠にありがたいです。https://codepen.io/mari0123_mari/pen/qBorVdK

[Lhankor_Mhy]

CodePen の方のコードでは、jQuery を読み込んでいないことが動かない原因だと思います。
しかし、実際のコードには別の原因がありそうですよね？　うまく再現できるコードを作れていないように思います。

[mari0123]

すみません！jqueryの読み込み設定忘れていました。再度、設定し貼り付けました。私の方ではこの内容で動かないのですが・・・https://codepen.io/mari0123_mari/pen/qBorVdK

[Lhankor_Mhy]

問題を把握しました。

Answer 1

スタッキングコンテキストが生成されて、背景に回っています。z-indexを調整するなどした方がいいかと思います。

.bg_deg5 {
	background-color: #b5e9ee;
	margin-top: 18.2vw;
	position: relative;
	/* z-index: -3; たとえば、消すとか*/
}

---

参考：
君は真に理解しているか？z-indexとスタッキングコンテキストの関係 - ICS MEDIA

Comments

[mari0123]

ご丁寧に問題の特定方法を教えていただき、また原因を特定していただいてありがとうございました！初心者でスタッキングコンテキストという言葉も初めて聞いた状況でした。z-indexの調整だけではうまく再現できそうにないので、背景の指定の方法自体を変更する方向で考えます。修正に時間を要してしまいそうなので、まずはお礼のみお伝えいたします。ありがとうございました！

[mari0123]

先ほど、背景のzーindexだけでの調整でうまくいかなかったのですが、全体のボックスシャドウ設定の「shadow」にもz-indexの値を入れており、そこも関係していることがわかったので調整したところ、うまく作動しました！とても嬉しいです！本当にありがとうございました！！！