【折りたたみFAQボックス】Q&A形式のコンテンツをクリックで展開／折りたたみする方法

このページでは、FAQ（よくある質問）をクリックで展開・折りたたみできるボックスを作る方法を紹介します。WordPressのクラシックエディタでも簡単に貼り付け可能です。

1 FAQをHTMLに貼り付け

<dl class="faq-wrapper">
  <div class="faq-box">
    <dt class="faq-question"><span class="faq-q-label">Q.</span> 配送にはどのくらいかかりますか？</dt>
    <dd class="faq-answer"><span class="faq-a-label">A.</span> 注文後、通常3〜5営業日でお届けします。</dd>
  </div>

  <div class="faq-box">
    <dt class="faq-question"><span class="faq-q-label">Q.</span> 支払い方法は何がありますか？</dt>
    <dd class="faq-answer"><span class="faq-a-label">A.</span> クレジットカード、銀行振込、PayPalなどに対応しています。</dd>
  </div>
</dl>

2 function.phpにコードを追加

// ------------------------------
// 折りたたみFAQショートコード
// ------------------------------
function add_faq_script() {
    wp_enqueue_script(
        'faq-toggle',
        get_stylesheet_directory_uri() . '/js/faq-toggle.js', // JSファイルを用意
        array('jquery'), 
        '1.0', 
        true
    );
}
add_action('wp_enqueue_scripts', 'add_faq_script');
  

3 汎用CSS

/* -----------------------------
 * 折りたたみFAQ（Qは青ラベル、Aは赤ラベル）
----------------------------- */

/* FAQ全体のラッパー */
.faq-wrapper {
    max-width: 700px; /* 最大幅を700pxに制限 */
    margin: 2em auto; /* 上下マージン2em、左右中央寄せ */
    font-family: "Helvetica Neue", Arial, sans-serif; /* フォント設定 */
}

/* 各FAQボックス */
.faq-box {
    border-radius: 12px; /* 角丸 */
    margin: 1em 0; /* 上下の余白1em */
    background: linear-gradient(145deg, #ffffff, #f9f9f9); /* 背景グラデーション */
    box-shadow: 0 4px 8px rgba(0,0,0,0.08); /* 影をつける */
    overflow: hidden; /* はみ出した要素を隠す */
    transition: transform 0.2s, box-shadow 0.2s; /* ホバー時のアニメーション */
}

/* FAQボックスにホバーした時 */
.faq-box:hover {
    transform: translateY(-2px); /* 少し浮かせる */
    box-shadow: 0 6px 12px rgba(0,0,0,0.12); /* 影を濃くする */
}

/* 質問部分 */
.faq-question {
    cursor: pointer; /* クリック可能カーソル */
    padding: 1em 1.2em; /* 上下1em、左右1.2emの余白 */
    font-weight: 600; /* 太字 */
    font-size: 1.05em; /* 文字サイズ */
    position: relative; /* アイコン位置指定用 */
    color: #333333; /* 質問本文は通常文字色 */
    transition: background 0.3s; /* 背景色変更のアニメーション */
}

/* 質問部分にホバーした時 */
.faq-question:hover {
    background-color: #e6f2ff; /* 背景色を薄青に変更 */
}

/* 質問右側の「＋」アイコン */
.faq-question::after {
    content: "＋"; /* 初期状態は「＋」 */
    position: absolute; /* 絶対配置 */
    right: 1.2em; /* 右から1.2em */
    top: 50%; /* 上から50% */
    transform: translateY(-50%); /* 垂直中央揃え */
    font-weight: bold; /* 太字 */
    font-size: 1.2em; /* アイコンサイズ */
    color: #0073aa; /* アイコン色 */
    transition: transform 0.3s, color 0.3s; /* 回転・色変化のアニメーション */
}

/* FAQボックスが開いている時 */
.faq-box.active .faq-question::after {
    content: "－"; /* 開いた状態は「－」 */
    color: #ff6600; /* アイコン色をオレンジに */
    transform: translateY(-50%) rotate(180deg); /* 回転させる */
}

/* 回答部分 */
.faq-answer {
    display: none; /* 初期は非表示 */
    padding: 1em 1.2em; /* 上下1em、左右1.2em */
    border-top: 1px solid #ddd; /* 上にボーダー */
    background-color: #f5faff; /* 背景色を薄青 */
    line-height: 1.7; /* 行間 */
    font-size: 0.98em; /* 文字サイズ */
    color: #333333; /* 回答本文は通常文字色 */
    transition: all 0.3s ease; /* 開閉アニメーション */
}

/* Qラベルだけ青 */
.faq-q-label {
    color: #0073cc; /* Qラベルの文字色を青に */
    font-weight: bold; /* 太字に */
}

/* Aラベルだけ赤 */
.faq-a-label {
    color: #cc0000; /* Aラベルの文字色を赤に */
    font-weight: bold; /* 太字に */
}

/* 開閉アニメーション付きで表示 */
.faq-box.active .faq-answer {
    display: block; /* 表示 */
    animation: fadeIn 0.3s ease; /* フェードインアニメーション */
}

/* フェードインのアニメーション定義 */
@keyframes fadeIn {
    from {opacity: 0; transform: translateY(-5px);} /* 初期：透明かつ少し上 */
    to {opacity: 1; transform: translateY(0);} /* 最終：不透明、元位置 */
}
  

4 JavaScriptにコードを追加（クリックで開閉）

ファイル名：faq-toggle.js
保存先：wp-content/themes/child-theme/js/faq-toggle.js

//-------------------------------------------
// 折りたたみFAQ（＋／－アイコン対応）
//-------------------------------------------
document.addEventListener("DOMContentLoaded", function() {
  var questions = document.querySelectorAll('.faq-question');
  questions.forEach(function(q) {
    q.addEventListener('click', function() {
      var answer = this.nextElementSibling;
      var box = this.parentElement; // dtを親としてfaq-box扱い
      if (answer.style.display === "block") {
        answer.style.display = "none";
        box.classList.remove('active'); // －を＋に戻す
      } else {
        answer.style.display = "block";
        box.classList.add('active'); // ＋を－に変更
      }
    });
  });
});
  

4.1 ディレクトリ構造

5 完成イメージ

Q. 配送にはどのくらいかかりますか？

A. 注文後、通常3〜5営業日でお届けします。

Q. 支払い方法は何がありますか？

A. クレジットカード、銀行振込、PayPalなどに対応しています。

6 代用プラグイン

コードでFAQボックスを作成するのが難しい場合、以下のFAQ専用プラグインを使えば、同様の折りたたみ機能を簡単に実装できます。

7 まとめ

• FAQボックスは、faq-boxでラップし、faq-questionをクリックすると開閉できます。
• 「＋／－」のアイコンは、faq-box.activeクラスで制御されています。
• Qラベルは青、Aラベルは赤にして視覚的にわかりやすくしています。
• CSSとJavaScriptを分けることで、管理や再利用が簡単になります。
• WordPressでは、functions.phpにスクリプトを登録しておくことで、テーマ内のどのページでもFAQを簡単に利用可能です。
• デザインは自由にカスタマイズ可能で、色や背景、アニメーションも簡単に変更できます。

この方法を使えば、ユーザーにわかりやすいFAQページを簡単に作成できます。必要に応じて質問数を増やしたり、デザインを調整してみてください。