アコーディオンの開閉をURLで制御！パラメータ連動の実装テクニック【JS中級】

6月 30, 2025 6月 30, 2025

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回は「JavaScript中級者向け」のテクニックとして、アコーディオンの開閉状態をURLのパラメータで制御する方法をご紹介します。

普通のアコーディオンって、ページを読み込むと初期状態に戻ってしまいますよね？

でも「URLに状態を反映できたら、リンクを共有したときに特定のセクションを開いた状態にできるのに…」なんて思ったこと、ありませんか？

このテクニックを使えば、次のようなことが可能になります。

FAQページで「質問3だけを開いた状態」のリンクを送れる
URLに合わせて自動で開くセクションを切り替えられる
SPA的なユーザー体験をシンプルに実現できる

中級レベルのJavaScriptを扱いますが、コピペで使える実装例付きなので安心して読み進めてください！

完成イメージとURL形式

まずは完成イメージを見ておきましょう。

例えば、以下のようなURLを開くと

https://example.com/faq.html?open=faq2

「faq2」というIDのついたアコーディオン項目だけが開いた状態で表示されます。
他の項目は閉じられたままなので、訪問者がすぐに目的の情報にアクセスできます。

対象ユーザーの例

このような機能は、次のようなサイトで特に効果的です！

よくある質問（FAQ）ページ
商品詳細のスペック比較セクション
社内ポータルのマニュアルコンテンツ

どれも「目的の情報にピンポイントで誘導したい」という場面に共通しますね。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

HTML構造（アコーディオンの基本形）

まずはシンプルなアコーディオンのHTML構造を用意します。

<div class="accordion" id="faq1">
  <button class="toggle">質問1</button>
  <div class="content">回答1の内容です。</div>
</div>

<div class="accordion" id="faq2">
  <button class="toggle">質問2</button>
  <div class="content">回答2の内容です。</div>
</div>

<div class="accordion" id="faq3">
  <button class="toggle">質問3</button>
  <div class="content">回答3の内容です。</div>
</div>

各アコーディオンには一意の id を付けておくことがポイントです。

CSSで開閉状態を定義

CSSでは、開閉の切り替えをクラスで制御できるようにします。

.accordion {
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.toggle {
  width: 100%;
  text-align: left;
  padding: 12px;
  font-weight: bold;
  background: #f0f0f0;
  border: none;
  cursor: pointer;
}

.content {
  display: none;
  padding: 12px;
  background: #fafafa;
  border-top: 1px solid #ccc;
}

.accordion.open .content {
  display: block;
}

「.open」クラスを付けると表示される、というシンプルな切り替え方式です。

JavaScript：クリック開閉＋URLパラメータ対応

以下のスクリプトでは

クリックで開閉を制御
URLパラメータに該当するIDを持つアコーディオンを初期状態で開く

という2つの機能を実装しています。

// クリックで開閉
document.querySelectorAll('.accordion .toggle').forEach(button => {
  button.addEventListener('click', () => {
    const accordion = button.parentElement;
    accordion.classList.toggle('open');
  });
});

// URLパラメータからopen対象を判定
const params = new URLSearchParams(window.location.search);
const openId = params.get('open');
if (openId) {
  const target = document.getElementById(openId);
  if (target) {
    target.classList.add('open');
    target.scrollIntoView({ behavior: 'smooth' });
  }
}

これで、?open=faq2 のようなパラメータを使ってアコーディオンの初期状態を制御できるようになります！