【jQuery】別のページから遷移した時にアコーディオンを開く方法

【jQuery】別のページから遷移した時にアコーディオンを開く方法 JavaScript

今回は別のページから遷移した時にそのアコーディオンを開いた状態にしておく方法を紹介します。

 

スポンサーリンク

今回やりたいこと

例えば「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を持つ要素ということになるわけです。

あとはアコーディオンを開く処理を各自好きなように書いてください。

 

まとめ

別のページから遷移時に特定のアコーディオンを開いた状態にするのは思ったより簡単にできます。

たまに必要になることがあるので知っておくと便利ですね。