特定のページからのアクセスではアコーディオンを開いて表示させる

問題

アコーディオンで作られた FAQ のページがあります。よく見かけますね。

通常こちらのページにアクセスした時は初期値では全てアコーディオンが閉じている仕様です。

ですが、あるページからアクセスした時は、アコーディオンの一つを開いた状態で遷移したい時があります。

例えば、あるページに「問い合わせはこちら」のリンクがあり、問い合わせ先は FAQ の Question に記載されている時などです。

解決法

遷移元の HREF の値に特定の文字列を入れる（アンカーリンク）
遷移先で自身の URI の文字列を取得。
特定の文字列（アンカーリンク）を検出できたらアコーディオンを開く処理をする

ソースコード

リンク元のページ

HREF の値に #acc03 を記述します。

index.html

<a href="target.html#acc03">リンク先</a>

リンク先のページ（FAQ）

アコーディオンを開閉させるコードはこちらの記事では省略しますが、is-open というクラスをトグルさせて表示非表示を切り替えているものとします。

faq.html

<div class="accordion">
  <div id="acc01" class="accordion-item">
    <h2 class="accordion-title">Question 1</h2>
    <div class="accordion-content">
      <p>This is an Answer 1</p>
    </div>
  </div>
  <div id="acc02" class="accordion-item">
    <h2 class="accordion-title">Question 2</h2>
    <div class="accordion-content">
      <p>This is an Answer 2</p>
    </div>
  </div>
  <div id="acc03" class="accordion-item">
    <h2 class="accordion-title">Q. 問い合わせ先はどちらでしょうか。</h2>
    <div class="accordion-content">
      <p>A. 問い合わせ先はこちらです。</p>
    </div>
  </div>
</div>

JS

リンク先のページ（FAQ）のアドレスバーの文字列を取得して、
もし、その文字列に #acc03が含まれていたら、
id="acc03" の要素に is-open クラスを付与します。
※こちらのJavaScript は FAQ ページで読み込むものです。

var url = location.href;
if (url.match(/#acc03/)) {
  var acc = document.getElementById('acc03');
  acc.classList.add('is-open');
}