今回は別のページから遷移した時にそのアコーディオンを開いた状態にしておく方法を紹介します。
今回やりたいこと
例えば「https://○○.com#menu01」みたいなリンクをクリックした時に、#menu01というidを持つアコーディオンの要素を開いた状態にしておきたいという感じです。
内部リンクなのでページ遷移後はこのidを持つ要素まで自動で移動しますが、ここでアコーディオンを開いた状態にしておくと見やすいですからね。これを実装します。
ページ遷移時にアコーディオンを開く方法
結論ですが以下のようなコードでokです。
$(function () {
// URLのハッシュ部分（id）を取得
const urlHash = location.hash;
// そのidを持つ要素がなかったら処理を抜ける
if (!$(urlHash).length) return;
// アコーディオンの要素を開く処理
$(urlHash)
.find('.accordion')
.addClass('is-show')
.next()
.show();
});
たったこれだけです。解説はコードに書いてあるとおりですね。
location.hashとすると例えば「https://○○.com#menu01」の「#menu01」の部分を取得できます。
if (!$(urlHash).length)はそのハッシュ（id）を持つ要素がページ内にあるかチェックしています（要素があれば1とか2とかになるのでtrue、なければ0になるのでfalseです）。要素がなかったらreturn;で処理を抜けます。
urlHash.lengthではなく$(urlHash).lengthとすることでそのidを持つ「要素」をチェックしています。urlHashが「#menu01」なら$(urlHash)は$('#menu01')と同じことになり、#menu01というidを持つ要素ということになるわけです。
あとはアコーディオンを開く処理を各自好きなように書いてください。
まとめ
別のページから遷移時に特定のアコーディオンを開いた状態にするのは思ったより簡単にできます。
たまに必要になることがあるので知っておくと便利ですね。
