WordPressのFAQページで、回答内に設置した外部リンクをクリックすると、開いていた回答が閉じてしまうという不具合が発生することがあります。
これはアコーディオンやスライド表示を行うJavaScriptの動作が原因で起きることが多く、見た目には小さな不具合でも、ユーザー体験を大きく損なってしまいます。

今回は、Shortcodes Ultimateのアコーディオン機能を使用したFAQページで発生していた、リンククリック時に回答が閉じてしまう問題を修正しました。

今回のご相談内容

WordPressのFAQページで、「回答内の外部リンクをクリックすると、開いていた回答が閉じてしまう」というご相談をいただきました。

通常の動作としては、「質問（Q）をクリック→ 回答（A）が開く」という挙動ですが、「回答内のリンクをクリック→ 回答が閉じてしまう」という現象が発生していました。

発生していた症状・エラー内容

具体的には、以下のような状態でした。

• FAQはアコーディオン形式で表示
• 回答内に外部サイトへのリンクが設置されている
• リンクをクリックするとページ遷移はするが、同時にアコーディオンが閉じてしまう

見た目のエラー表示などはなく、「使い勝手が悪い状態」になっていました。

原因の特定ポイント

調査の結果、原因はアコーディオンのクリックイベントが、回答内のリンククリックにも反応してしまっていたことでした。

アコーディオンの多くは、

• 要素内のクリックを検知
• 開閉の処理を実行

という仕組みになっています。

そのため、「回答内のリンクをクリック→ 親要素のクリックイベントも発動→ アコーディオンが閉じる」という挙動になっていました。

実際に行った対応内容

今回は、回答内のリンクをクリックした際に、アコーディオンの開閉処理に影響しないように調整しました。

具体的には、

• 回答内リンクのクリックイベントで
• 親要素へのイベント伝播を停止

という処理をJavaScriptで追加しました。

これにより、「リンククリック→ アコーディオンの開閉処理が発動しない」という状態に修正しました。

対応後の結果・改善点

修正後は、

• 回答を開いた状態で
• 外部リンクをクリックしても
• 回答が閉じない

という、自然な動作になりました。

ユーザーが回答を読みながらリンク先を確認できるため、使い勝手も改善されています。

今回の対応から分かったこと

今回のような不具合は、

• アコーディオン
• タブ
• モーダル
• スライダー

など、JavaScriptで表示制御しているパーツでよく発生します。

見た目は正常でも、クリックイベントの処理が意図せず重なっているケースは少なくありません。

同様のトラブルを防ぐために

今回のような不具合を防ぐには、以下の点に注意が必要です。

• アコーディオン内にリンクを設置する場合は挙動を確認する
• プラグイン任せにせず、クリック動作を検証する
• JavaScriptのイベント伝播を意識した実装を行う

特に、FAQやサービス説明ページでは「読む → リンクを開く」という導線が多いため、細かな挙動の確認が重要になります。

メディアプライムスタイルのサポートについて

メディアプライムスタイルでは、

• 表示崩れ
• クリック動作の不具合
• プラグインの挙動トラブル

といった、日常的なWordPressの不具合対応も行っています。

「大きなエラーではないけど、使い勝手が気になる」というご相談も多くいただいています。

小さな違和感や不具合でも、気になることがあればお気軽にご相談ください。