SWELL│FAQブロックをアコーディオンにするカスタマイズ

2023.04.042026.10.04

SWELLのFAQブロックを、質問のボタンで回答を開閉できるアコーディオンにする方法です。

FAQブロックに専用クラスを付け、CSSとJavaScriptを追加します。

対象にしたFAQだけを変更し、ほかのFAQは通常表示のまま残せます。

単に文章を折りたたむ場合は、SWELLのアコーディオンブロックも使えます。

質問と回答をFAQブロックで管理しながら、回答を開閉したい場合にこの方法を使ってください。

サンプル：FAQの回答を開閉する

1つ目は閉じた状態、2つ目は開いた状態から始まります。

それぞれの質問は独立して開閉し、Enter・Spaceでも操作できます。

質問をクリックすると回答が開きますか？: はい。この見本では質問のボタンをクリックすると、その回答だけが開きます。Tabキーで移動し、EnterやSpaceでも開閉できます。
最初から回答を開いておけますか？: はい。この質問は最初から開く設定の見本です。FAQ項目の追加CSSクラスにopenを付けます。ほかの回答を開いても、この回答は自動で閉じません。

FAQブロックに追加CSSクラスを付ける

SWELLのFAQブロックで質問と回答を作ります。

外側のFAQブロックを選択し、「高度な設定 → 追加CSSクラス」にwaza-faq-toggleを入力してください。

先頭のドットは不要です。

複数のFAQブロックに使う場合も、それぞれに同じクラスを付けます。

最初から開く回答は、その質問と回答を含む「FAQ項目」へopenクラスを付けます。

質問文の一部分だけに付ける設定ではありません。

質問文にはリンクや別のボタンを入れず、リンクは回答側へ配置してください。

CSSの設定

「外観 → カスタマイズ → 追加CSS」に、次のコードを追加します。

親テーマのstyle.cssを直接変更する必要はありません。

追加前のCSSを控え、旧版のFAQ用CSSを使っている場合は先に取り外してください。

.waza-faq-toggle .faq_q { padding: 0; }
.waza-faq-toggle .faq_q::before,
.waza-faq-toggle .faq_q::after { display: none; }
.waza-faq-toggle .faq_a[hidden] { display: none !important; }
.waza-faq-toggle .waza-faq-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  width: 100%;
  min-height: 44px;
  padding: 1em;
  border: 1px solid #888;
  border-radius: 4px;
  color: #333;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.waza-faq-toggle .waza-faq-button::after { content: '+'; flex: 0 0 auto; }
.waza-faq-toggle .waza-faq-button[aria-expanded="true"]::after { content: '−'; }
.waza-faq-toggle .waza-faq-button:focus-visible { outline: 3px solid #245bba; outline-offset: 3px; }

プラス・マイナス記号はCSSのcontentで指定しています。

SWELLのアイコンフォントには依存しません。

色や余白を変える場合も、先頭の.waza-faq-toggleを残して適用範囲を限定します。

JavaScriptの設定

対象の記事編集画面にあるSWELLの「カスタムJS」欄へ、scriptタグを付けずに追加します。

PHPは不要です。

追加CSS欄やfunctions.phpへ、このJavaScriptをそのまま貼り付けないでください。

(function () {
  function initFaq() {
    document.querySelectorAll('.waza-faq-toggle .swell-block-faq__item').forEach(function (item, index) {
      if (item.dataset.wazaReady) return;
      const question = item.querySelector('.faq_q');
      const answer = item.querySelector('.faq_a');
      if (!question || !answer || question.querySelector('a, button, input')) return;
      const button = document.createElement('button');
      button.type = 'button';
      button.className = 'waza-faq-button';
      while (question.firstChild) button.appendChild(question.firstChild);
      question.appendChild(button);
      let id = 'waza-faq-answer-' + index;
      while (document.getElementById(id)) id += '-x';
      if (!answer.id) answer.id = id;
      button.setAttribute('aria-controls', answer.id);
      const open = item.classList.contains('open');
      button.setAttribute('aria-expanded', String(open));
      answer.hidden = !open;
      button.addEventListener('click', function () {
        const expanded = button.getAttribute('aria-expanded') === 'true';
        answer.hidden = expanded;
        button.setAttribute('aria-expanded', String(!expanded));
      });
      item.dataset.wazaReady = '1';
    });
  }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initFaq, { once: true });
  else initFaq();
})();

質問の中身をbutton要素に移し、回答の表示状態とaria-expandedを連動させます。

同じFAQを二重に初期化しないようにしています。

JavaScriptが読み込まれなければ、回答は通常のFAQとして表示されたまま残ります。

JavaScript未読込時に回答を隠さないことは、掲載CSSがhidden属性のある回答だけを非表示にする構成から確認しています。

ブラウザー全体でJavaScriptを無効にした操作試験とは区別してください。

2026年10月2日の公開確認ではPC・スマホ相当幅で複数FAQと長い回答を操作しましたが、実機、全支援技術、編集画面での再保存は確認対象に含めていません。

FAQブロックの確認と旧版からの移行

公開画面で、マウス・タップ相当のクリック・キーボードによる開閉、長い回答、複数のFAQ、最初から開く項目を確認します。

このコードだけでは、1つを開くとほかを自動で閉じる動作にはなりません。

旧記事の.faq_a { max-height: 0; }などのCSSと、motoki_faq_accordionなどの旧PHP・JavaScriptは、新版と併用しません。

旧コードを残すと回答が見えなくなったり、クリックが二重に処理されたりするため、控えを保存してから取り外します。

編集画面で回答が見えない場合も、エディターへ読み込んだ旧CSSを確認してください。

新版のCSSはJavaScriptが付けるhidden属性だけを対象にするため、CSSだけで回答を一律に隠しません。

表示されない場合と元に戻す方法

動かない場合は、FAQブロックのクラス、カスタムJSの保存、キャッシュ、旧コードの残りを確認します。

質問内にリンクなどがある項目は、このコードでは変換しません。

元へ戻すときは、今回のCSS・JavaScriptと専用クラスを削除して再読み込みします。

FAQブロック内の質問・回答はそのまま残ります。

構造化データの設定は、開閉とは別の設定です。

この見本ではサンプルのFAQ構造化データを出力していません。

項目の階層を開閉するならリストのアコーディオン、文章の先頭だけを見せたい場合は続きを読むボタンを選べます。

ほかの表示はブロックの見本一覧、目的から探す場合はカスタマイズ一覧をご覧ください。

複数のFAQブロックと長い回答

次は2つ目のFAQブロックです。

質問と回答のIDは別々に作り、1つ目のFAQの開閉には影響しません。

長い回答の末尾にあるリンクは、回答を開いてからTabで移動できます。

長い回答と複数のFAQを同時に使えますか？: はい。複数のFAQブロックを置いても、各質問は対応する回答だけを開きます。別の質問を開いても、すでに開いた回答は閉じないため、内容を比較しながら読めます。回答の高さは固定せず、長い文章も最後まで表示します。条件や手順が多い場合は段落を分け、質問文と回答の内容を対応させてください。回答内のリンクは、質問をEnterかSpaceで開いた後、Tabキーで移動して操作できます。項目の階層を表す場合は、リストを開閉する見本も参考にしてください。
最初から回答を開いておけますか？: はい。この質問は最初から開く設定の見本です。FAQ項目の追加CSSクラスにopenを付けます。ほかの回答を開いても、この回答は自動で閉じません。