FAQをクリックで開閉するHTML・CSS・JavaScript｜コピペ対応

よくある質問が増えると、ページが長くなり、知りたい回答を探しにくくなります。質問をクリックしたときだけ回答を開く形式にすれば、内容を整理しながら必要な情報を掲載できます。

ただし、見た目だけを優先したJavaScriptでは、キーボード操作ができない、スクリプトが動かないと回答を読めないといった問題が起こります。本記事では、HTML標準のdetails要素を使った簡単な方法と、JavaScriptで一つずつ開く方法を紹介します。

FAQを開閉式にするメリット

質問だけを一覧で確認できるため、利用者は自分に関係する項目を見つけやすくなります。料金、納期、キャンセル、対応地域など、問い合わせ前によく確認される内容を整理するのに向いています。

一方で、すべての文章を閉じると重要情報に気づかれない可能性があります。料金や営業時間など必ず見てほしい情報は通常表示し、補足的な疑問をFAQにまとめましょう。

JavaScriptなしで作る基本のFAQ

detailsとsummaryを使えば、JavaScriptなしでクリック開閉できます。

<div class="faq-list">
  <details class="faq-item">
    <summary>相談だけでも可能ですか？</summary>
    <div class="faq-answer">
      <p>はい。内容が決まっていない段階でもご相談いただけます。</p>
    </div>
  </details>

  <details class="faq-item">
    <summary>見積もりは無料ですか？</summary>
    <div class="faq-answer">
      <p>初回のお見積もりは無料です。</p>
    </div>
  </details>
</div>

summaryはクリックだけでなくキーボードでも操作できます。JavaScriptが読み込めない場合も、ブラウザ標準機能で開閉できます。

CSSで見やすいデザインにする

.faq-list {
  display: grid;
  gap: 12px;
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  border: 1px solid #dfe5ea;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.faq-item summary {
  position: relative;
  padding: 18px 52px 18px 20px;
  color: #17324a;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  font-size: 24px;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-answer {
  padding: 0 20px 18px;
  color: #4c5965;
  line-height: 1.8;
}

プラスとマイナスは補助表示です。質問文そのものをsummaryに入れることで、記号だけに操作を依存しません。

JavaScriptで一つだけ開くようにする

複数の回答を同時に開きたくない場合は、次のJavaScriptを</body>の直前、またはサイトのJavaScriptファイルへ追加します。

const faqItems = document.querySelectorAll('.faq-item');

faqItems.forEach((item) => {
  item.addEventListener('toggle', () => {
    if (!item.open) return;

    faqItems.forEach((otherItem) => {
      if (otherItem !== item) {
        otherItem.removeAttribute('open');
      }
    });
  });
});

開かれた項目以外からopen属性を外すだけなので、HTML標準の操作性を保ちながら動作を追加できます。

最初の回答を開いておく方法

最初から表示したいFAQにはopen属性を付けます。

<details class="faq-item" open>
  ...
</details>

最重要の質問を一つ開いておくと、FAQに回答が入っていることが伝わります。すべてを開いた状態にすると一覧性が下がるため、1項目程度がおすすめです。

FAQを書くときの注意点

• 実際によく聞かれる質問を優先する
• 一つの回答で複数の話題を詰め込まない
• 料金や規約を曖昧にしない
• 古くなった回答を定期的に更新する
• 回答内に必要なページへのリンクを付ける

検索キーワードを不自然に繰り返すのではなく、お客様が理解できる短い質問と具体的な回答を書きましょう。

まとめ

details要素を使えば、JavaScriptなしでも操作しやすい開閉式FAQを作れます。一つだけ開く動作が必要な場合にJavaScriptを追加し、重要情報はFAQの外にも分かりやすく掲載しましょう。