jsでcssを操作して、アコーディオンを開いた状態の別ページにリンクする

Question

index01.htmlから、index02.htmlにリンクする際、index02.html内にあるアコーディオン部分を開いた状態で、その位置に移動するようにしたいです。
アコーディオンはcssです。

【状況】
index01.html内のリンク

<a href="index02.html#s01">この職種の詳細を見る</a>

index02.htmlのタブ部分

<div id="s01">
<div class="accbox">
    <!--詳細-->
      <label for="label1">▼ 詳細をみる ／ 詳細を閉じる ▲</label>
      <input type="checkbox" id="label1" class="cssacc" />
      <div class="accshow">
        <!--隠す中身-->
        <p>
（ここにコンテンツ）
</p>
</div>
</div>
</div>

index02.htmlにかかるcss

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + .accshow {
    height: auto;
    padding: 5px;
    opacity: 1;
}

【やってみたこと】

index01.html内のリンク

<a href="index02.html#s01" onclick="myfunc()">この職種の詳細を見る</a>
<script>
function myfunc(){
$(function() {
    $("#s01").cssacc({
      
    });
});
}
  </script>

いろいろなサイトを見て、上記のようにクリックで機能する関数を作成するのかなと思うのですが、index02.htmlのファイルをどう指定するのか、また.cssaccをcheckedにする方法も理解できませんでした。
何か方法がわかる方がいらっしゃいましたらお答えいただけるとありがたいです。
どうぞよろしくお願いします。

Answer 1

URLがhttp://example.com/index02.html#s01の時に、location.hashは#s01を返します。
jQueryを使っているようなので、$(location.hash)は$('#s01')と同じです。
ですから、index02.htmlに

$(function(){
  $(location.hash).find(...).prop('checked', true);
})

みたいな感じで追加すれば、動作するのではないでしょうか。

Comments

[horiaya]

ありがとうございます！
解決しました！！

<script>
$(function(){
$(location.hash).find('.cssacc').prop('checked', true);
})
</script>

また、index02.html#s02, index02.html#s03, index02.html#s04...とアコーディオンの開きが複数ありそれぞれにリンクする必要がありましたが、こちらも解決しました。