WordPressでアコーディオンが開かない原因と修正方法

WordPressでアコーディオンを実装している際に、クリックしても開かない場合があります。特にHTMLにのようにイベントが正しく設定されていないケースが原因です。この記事では、正しい書き方と修正方法を解説します。

1. onclick属性の記述ミス
2. JavaScript関数の作成
3. HTMLの修正例
4. jQueryを使う方法（オプション）
まとめ

1. onclick属性の記述ミス

質問のコードではとなっており、onclick属性が空になっています。onclickには呼び出すJavaScript関数を指定する必要があります。

例えば、アコーディオンを開く関数を toggleAnswer() とした場合、<span onclick="toggleAnswer(this)"> のように書きます。

2. JavaScript関数の作成

アコーディオンを開閉する関数の例。

function toggleAnswer(el) {
  const dd = el.closest('dt').nextElementSibling;
  if (dd.style.display === 'block') {
    dd.style.display = 'none';
  } else {
    dd.style.display = 'block';
  }
}

この関数は、クリックされた質問タイトルの次の

要素を開閉します。

3. HTMLの修正例

<dt class="question__con__ttl">
  <span onclick="toggleAnswer(this)" class="question__con__ttl__inner">
    <span class="question__con__ttl__ico">Q</span>文章？
  </span>
</dt>
<dd class="question__con__data" style="display:none;">
  <div class="question__con__data__inner">
    <span>A</span>
    <div class="text">答え</div>
  </div>
</dd>

ポイントは、

を初期状態で非表示にしておき、onclickで開閉することです。

4. jQueryを使う方法（オプション）

WordPressではjQueryを使って簡単にアコーディオンを作ることも可能です。

jQuery(document).ready(function($){
  $('.question__con__ttl__inner').click(function(){
    $(this).closest('dt').next('dd').slideToggle();
  });
});

まとめ

アコーディオンが開かない主な原因は、onclick属性が空になっていることです。onclickに開閉用の関数を指定するか、jQueryでクリックイベントを設定することで解決できます。また、

要素を初期状態で非表示にすることも忘れないでください。