【SWELL】ページ内リンクからアコーディオンを自動展開・スクロールさせる方法

WordPressサイトで、「詳細はこちら」というリンクをクリックした際に、折りたたまれているアコーディオンを自動で開き、その場所までスムーズに移動させたい場面があります。
この記事では、SWELLでのアコーディオンの自動展開スクロールの実装方法を解説します。

実現したい挙動

• ページ内のアンカーリンクをクリックする。
• 対象のアコーディオンが自動でパッと開く。
• 開いたアコーディオンの先頭へスムーズにスクロールする。
• 外部サイトや別ページから「URL#id」でアクセスした際も同様に展開する。

※本記事の末尾にデモ用のアコーディオンを設置しています。
こちらをクリックしていただくと、このページの下に設置しているアコーディオンが開きます。

HTMLの準備（IDの設定）

まずは、開きたいアコーディオン（detailsタグ）に固有のIDを割り当てます。

• アコーディオンブロックを追加
• アコーディオンの中の「項目」ブロックを選択
• 右側のブロック設定「高度な設定」→「HTML アンカー」に my-accordion （固有のID）を入力します。

サンプルコードのIDをmy-accordionとしています。こちらを任意の固有IDに変更してご使用ください。

JavaScriptの実装

WordPressの「カスタムHTML」ブロック、またはテーマのカスタマイザー内にある「高度な設定（JS用）」に以下のコードを貼り付けてください。

<script>
document.addEventListener('DOMContentLoaded', function() {
    // URLにハッシュが含まれている場合
    if (window.location.hash === '#my-accordion') {
        const details = document.querySelector('#my-accordion');
        if (details) {
            details.setAttribute('open', '');
            details.scrollIntoView({ behavior: 'smooth' });
        }
    }
    
    // ページ内リンクをクリックした時
    const link = document.querySelector('a[href="#my-accordion"]');
    if (link) {
        link.addEventListener('click', function(e) {
            const details = document.querySelector('#my-accordion');
            if (details) {
                setTimeout(() => {
                    details.setAttribute('open', '');
                }, 100);
            }
        });
    }
});
</script>

IDを独自のものにした場合は、コード内の#my-accordionも書き換えてください（計3箇所）

コードのポイント解説

• details.setAttribute('open', '')
  SWELLのアコーディオン（detailsタグ）に open 属性を付与することで、クリック操作なしで中身を展開させています。
• setTimeout（遅延処理）
  ページ内リンクをクリックした際、テーマ側のスクロール処理などと干渉して正常に開かない場合があります。100（0.1秒）の待ち時間を作ることで、確実にアコーディオンを開くようにしています。
• scrollIntoView
  window.location.hash を判定し、ページを読み込んだ瞬間にターゲットとなるアコーディオンまで自動で画面をスライドさせます。behavior: 'smooth' を指定することで、唐突感をなくし、ユーザーに移動先を認識させやすくしています。

うまく動かない時のチェックリスト

• ID（HTMLアンカー）は正しいか？
  設定したIDが my-accordion （任意の固有のID）になっているか確認してください。#（シャープ）は不要です。
• 「項目」ブロックにIDを設定しているか？
  親のアコーディオンブロックではなく、中身の「項目」ブロックにIDを設定してください。
• キャッシュをクリアしたか？
  SWELLのキャッシュ機能やプラグインの影響で、古いJSが残っている場合があります。一度クリアして確認しましょう。

まとめ

アコーディオンの自動展開は、FAQや補足情報の多いページで非常に役立つカスタマイズです。

1. アコーディオンにID（my-accordion）をつける
2. リンクのURLを #my-accordion にする
3. JavaScriptを貼る

この3ステップで、ユーザーを迷わせない導線が作れます。ぜひ活用してみてください。