特定のアコーディオンパネルを開いたまま他のページへリンクし、クリックしたら開閉するようにしたい

Question

特定のアコーディオンが開いたままリンクし、
クリックするとアコーディオンが閉じるようにしたいのですがクリックしても開いたままになってしまいます。
■HTML

<ul> <li> <dl class="accordion"> <dt id="tab_link">タイトル</dt> <dd class="toggle">文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</dd> </dl> </li> <dl> <dt>タイトル</dt> <dd>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</dd> </dl> </li> <dl> <dt>タイトル</dt> <dd>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</dd> </dl> </li> </ul>

■JS
$(function(){
$(".toggle").show();
$(".accordion dt").on("click", function() {
$(this).next().slideToggle();
$(this).toggleClass("active");
});
$(".accordion dt").mouseover(function(){
$(this).addClass("over");
});
$(".accordion dt").mouseout(function(){
$(this).removeClass("over");
});
});

どこがおかしいのかアドバイスいただけると幸いです。
よろしくお願いいたします。

Comments

[Yorrie]

HTMLやjs等のコード類は、マークダウンのコードブロック内に入れてください！
(エディター上部にある <code> っていうのを押すと出てくるアレです)

[and44]

TatamiSteakさま

アドバイスありがとうございました。
試させていただきましたが、意図しない動きになってしまいました。

https://gyazo.com/2b9ecf1dc27554958733db899f502e0e

↑上記のサイトにて
特定のアコーディオンパネルを開いたまま他のページへリンクまでは成功しておりますが、
【クリックしたら開閉する】ができていない状態です、、

参考ページ
https://plant-dev.japanprint.biz/plant_pay

Answer 1

TatamiSteakさん

色々とありがとうございました！
なんとか解決できました！！

参考URL
https://gyazo.com/e13f7fc7325427d4990f98bdc709886a

※各コードは下記の通りです

□THML

<ul>
<li>
<dl>
<dt id="tab_link" class="accordion">タイトル：アコーディオン1</dt>
<dd class="toggle">ここに説明文などが入りますここに説明文などが入りますここに説明文などが入ります</dd>
</dl>
</li>
<li>
<dl>
<dt>タイトル：アコーディオン2</dt>
<dd>ここに説明文などが入りますここに説明文などが入りますここに説明文などが入ります</dd>
</dl>
</li>
<li>
<dl>
<dt>タイトル：アコーディオン3</dt>
<dd>ここに説明文などが入りますここに説明文などが入りますここに説明文などが入ります</dd>
</dl>
</li>
</ul>

□JavaScript

  $(".toggle").show();
    $(".accordion dt").on("click", function() {
      $(this).next().slideToggle();
      $(this).toggleClass("active");
    });
    $(".accordion dt").mouseover(function(){
      $(this).addClass("select");   
      });
    $(".accordion dt").mouseout(function(){
      $(this).removeClass("over");    
  });
});

※今回は「タイトル：アコーディオン1」にid名やclass名を付けてJSにて機能するようにしています。

$(this).addClass("select"); 

の部分を

("over"); 

から

("select"); 

にしたらいい感じに機能しました。

Answer 2

①2つめ以降のliに開始タグが記述されていない
②2つめ以降のdlにclass="accordion"の記述がない

この修正の後、正常に動作が確認できましたが、
これで治らなければ現状頂いてる情報ではこれが限界です…

<追記>
jsの最初に記述してる$(".toggle").show();が作動し続けているので、
最初のアコーディオンメニューが開いたまんまになっているという感じですかね？
.toggleをクリックしたらクラスを消し去るようにすれば閉じてくれるのではないでしょうか？

            $(".toggle").on("click", function() {
                $(this).removeClass("toggle");
            });

Comments

[and44]

早々にご回答ありがとうございます！
なお、ご指摘ありがとうございますm(__)m
修正させていただきます。

[and44]

TatamiSteakさま

アドバイスありがとうございました。
試させていただきましたが、意図しない動きになってしまいました。

https://gyazo.com/2b9ecf1dc27554958733db899f502e0e

↑上記のサイトにて
特定のアコーディオンパネルを開いたまま他のページへリンクまでは成功しておりますが、
【クリックしたら開閉する】ができていない状態です、、

参考ページ
https://plant-dev.japanprint.biz/plant_pay

[Yorrie]

これコンプライアンス的に大丈夫なやつなんですかね……？まぁいっか！

えーと、「ひとつのアコーディオンを開いたら、他のメニューは閉じるようにする」という感じでしょうか？
認識間違ってたらすみません！

[and44]

はい、そうです

[and44]

＞コンプライアンス~
すでに本公開済みではあります

現在でもページにてアコーディオンの修正してます

「再発行の手続きはどうしたらよいですか？」もクリックしたら閉じるようにしたですね、、
すいません、、

[Yorrie]

追記しましたー！これで閉じてくれるかご確認お願いします！

[and44]

ありがとうございます。
https://gyazo.com/b88cdfcea18bde3b0ff5e8a3f68a9f1a

なんか面白い動きになりました
下記のように修正しました

$(function(){
$(".toggle").on("click", function() {
$(this).removeClass("toggle");
});
$(".accordion dt").on("click", function() {
$(this).next().slideToggle();
$(this).toggleClass("active");
});
$(".accordion dt").mouseover(function(){
$(this).addClass("over");
});
$(".accordion dt").mouseout(function(){
$(this).removeClass("over");
});
});

[and44]

色々とありがとうございます、こちらでもコード修正します。

[Yorrie]

ギギギ……
ちなみにdtのtab_linkとかddのtoggleとかを外してページ表示した場合だとどうなりますか？

[and44]

回答ありがとうございます。
ごめんなさい、これから打ち合わせあるんで上記のテストは今日の夜にやってこちらに回答書きますねm(__)m

[and44]

回答遅くなりまして、申し訳ありません、、
体調崩してましてほとんど寝てました、、
＞ちなみにdtのtab_linkとかddのtoggleとかを外してページ表示した場合だとどうなりますか？
次のページのTOPへリンクするだけになりますね。