FAQ・Q&A向けトグルスイッチの作り方【HTML/CSS/JavaScript・サンプルコード付き】

FAQ・Q&A向けトグルスイッチの作り方

FAQ・Q&A向けトグルスイッチの作り方を紹介します。このサンプルでは、質問ごとにトグルスイッチを配置し、スイッチをONにすると対応する回答を表示、OFFにすると回答を非表示にします。複数の質問をそれぞれ個別に切り替えられるため、必要な回答だけを確認できるFAQを作成できます。

施設案内やサービス紹介ページのよくある質問、ECサイトの利用案内、会員サイトのヘルプなど、複数のQ&Aをまとめて掲載したい場面に利用できます。質問文とスイッチを横並びに配置し、回答は質問の下へ表示するため、どのスイッチがどの回答に対応しているのか分かりやすい構成です。

質問文や回答文はHTMLから変更でき、CSSではFAQ全体の横幅、余白、背景色、枠線、角丸、トグルスイッチのサイズや色などを調整できます。JavaScriptでは各トグルスイッチの状態を取得し、対応する回答の表示・非表示を切り替えます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

施設についてよくある質問

確認したい質問のスイッチをONにしてください。

営業時間を教えてください

A. 営業時間は午前9時から午後6時までです。

利用料金はいくらですか？

A. 一般料金は1,000円です。利用内容によって料金が異なる場合があります。

予約は必要ですか？

A. 通常は予約なしで利用できます。

各質問のトグルスイッチをONにすると回答が表示され、OFFにすると非表示になります。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>FAQ・Q&A向けトグルスイッチ</title>

  <!-- CSSファイル -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- FAQ全体 -->
  <div class="faq-toggle-switch_wrap">

    <!-- タイトル -->
    <div class="faq-toggle-switch_title">
      施設についてよくある質問
    </div>

    <!-- 説明文 -->
    <p class="faq-toggle-switch_text">
      確認したい質問のスイッチをONにしてください。
    </p>

    <!-- FAQ一覧 -->
    <div class="faq-toggle-switch_list">

      <!-- 営業時間 -->
      <div class="faq-toggle-switch_item">

        <div class="faq-toggle-switch_question">

          <div class="faq-toggle-switch_label">
            営業時間を教えてください
          </div>

          <label class="faq-toggle-switch_switch">
            <input
              type="checkbox"
              aria-label="営業時間の回答を表示">
            <span class="faq-toggle-switch_slider"></span>
          </label>

        </div>

        <p class="faq-toggle-switch_answer">
          <strong>A.</strong>
          営業時間は午前9時から午後6時までです。
        </p>

      </div>

      <!-- 利用料金 -->
      <div class="faq-toggle-switch_item">

        <div class="faq-toggle-switch_question">

          <div class="faq-toggle-switch_label">
            利用料金はいくらですか？
          </div>

          <label class="faq-toggle-switch_switch">
            <input
              type="checkbox"
              aria-label="利用料金の回答を表示">
            <span class="faq-toggle-switch_slider"></span>
          </label>

        </div>

        <p class="faq-toggle-switch_answer">
          <strong>A.</strong>
          一般料金は1,000円です。利用内容によって料金が異なる場合があります。
        </p>

      </div>

      <!-- 予約 -->
      <div class="faq-toggle-switch_item">

        <div class="faq-toggle-switch_question">

          <div class="faq-toggle-switch_label">
            予約は必要ですか？
          </div>

          <label class="faq-toggle-switch_switch">
            <input
              type="checkbox"
              aria-label="予約についての回答を表示">
            <span class="faq-toggle-switch_slider"></span>
          </label>

        </div>

        <p class="faq-toggle-switch_answer">
          <strong>A.</strong>
          通常は予約なしで利用できます。
        </p>

      </div>

    </div>

  </div>

  <!-- JavaScriptファイル -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20pxの余白 */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* 基本の文字色 */
  font-family:sans-serif; /* 使用するフォント */
}

/* FAQ全体と内部要素 */
.faq-toggle-switch_wrap,
.faq-toggle-switch_wrap *{
  box-sizing:border-box; /* paddingとborderを要素サイズへ含める */
}

/* FAQ全体 */
.faq-toggle-switch_wrap{
  width:100%; /* 画面幅に合わせて縮小 */
  max-width:700px; /* 最大横幅。値を大きくすると横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて中央配置 */
  padding:32px; /* 内側余白。値を大きくすると余白が広がる */
  border:1px solid #dbe4f0; /* FAQ全体の枠線 */
  border-radius:18px; /* 全体の角丸 */
  background:#f8fbff; /* FAQ全体の背景色 */
}

/* タイトル */
.faq-toggle-switch_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  text-align:center; /* 中央揃え */
  color:#111827; /* タイトルの文字色 */
}

/* 説明文 */
.faq-toggle-switch_text{
  margin:0 0 28px; /* 下側28pxの余白 */
  text-align:center; /* 中央揃え */
  color:#4b5563; /* 説明文の文字色 */
  line-height:1.8; /* 説明文の行間 */
}

/* FAQ一覧 */
.faq-toggle-switch_list{
  display:grid; /* FAQ項目を縦方向へ配置 */
  gap:14px; /* FAQ項目同士の間隔 */
}

/* FAQ項目 */
.faq-toggle-switch_item{
  border:1px solid #dbe4f0; /* FAQ項目の枠線 */
  border-radius:12px; /* FAQ項目の角丸 */
  background:#ffffff; /* FAQ項目の背景色 */
  overflow:hidden; /* 角丸の外側を非表示 */
}

/* 質問部分 */
.faq-toggle-switch_question{
  display:flex; /* 質問文とスイッチを横並びにする */
  align-items:center; /* 上下中央へ揃える */
  justify-content:space-between; /* 左右へ配置 */
  gap:20px; /* 質問文とスイッチの間隔 */
  min-height:64px; /* 質問部分の最小高さ */
  padding:16px 18px; /* 上下16px・左右18pxの内側余白 */
}

/* 質問文 */
.faq-toggle-switch_label{
  color:#111827; /* 質問文の文字色 */
  font-size:16px; /* 質問文の文字サイズ */
  font-weight:700; /* 質問文を太字にする */
  line-height:1.5; /* 質問文の行間 */
}

/* トグルスイッチ全体 */
.faq-toggle-switch_switch{
  position:relative; /* スライダーを配置する基準 */
  width:58px; /* スイッチの横幅 */
  height:32px; /* スイッチの高さ */
  flex-shrink:0; /* スイッチが縮まないようにする */
}

/* チェックボックス本体 */
.faq-toggle-switch_switch input{
  position:absolute; /* 見た目から外して配置 */
  width:1px; /* 最小サイズ */
  height:1px; /* 最小サイズ */
  opacity:0; /* 見えない状態にする */
}

/* スイッチ背景 */
.faq-toggle-switch_slider{
  position:absolute; /* スイッチ全体へ配置 */
  inset:0; /* 上下左右いっぱいに広げる */
  border-radius:999px; /* カプセル型にする */
  background:#cbd5e1; /* OFF時の背景色 */
  cursor:pointer; /* マウスポインターを変更 */
  transition:.3s; /* 0.3秒で色を切り替える */
}

/* スイッチの丸 */
.faq-toggle-switch_slider::before{
  content:""; /* 擬似要素を表示 */
  position:absolute; /* スイッチ内へ配置 */
  width:24px; /* 丸の横幅 */
  height:24px; /* 丸の高さ */
  top:4px; /* 上から4px */
  left:4px; /* 左から4px */
  border-radius:50%; /* 円形にする */
  background:#ffffff; /* 丸の背景色 */
  transition:.3s; /* 0.3秒で位置を切り替える */
}

/* ON時のスイッチ背景 */
.faq-toggle-switch_switch input:checked + .faq-toggle-switch_slider{
  background:#2563eb; /* ON時の背景色 */
}

/* ON時の丸 */
.faq-toggle-switch_switch input:checked + .faq-toggle-switch_slider::before{
  transform:translateX(26px); /* 丸を右へ26px移動 */
}

/* キーボード操作時 */
.faq-toggle-switch_switch input:focus-visible + .faq-toggle-switch_slider{
  outline:3px solid rgba(37,99,235,.2); /* フォーカス時の強調線 */
  outline-offset:3px; /* 強調線とスイッチの間隔 */
}

/* 回答 */
.faq-toggle-switch_answer{
  display:none; /* 初期状態では回答を非表示 */
  margin:0; /* 外側余白を削除 */
  padding:0 18px 18px; /* 左右18px・下18pxの内側余白 */
  color:#4b5563; /* 回答文の文字色 */
  font-size:16px; /* 回答文の文字サイズ */
  line-height:1.8; /* 回答文の行間 */
}

/* 表示中の回答 */
.faq-toggle-switch_answer.is-visible{
  display:block; /* 回答を表示 */
}

/* A.表記 */
.faq-toggle-switch_answer strong{
  margin-right:8px; /* 回答文との間隔 */
  color:#2563eb; /* A.の文字色 */
}

/* 画面幅640px以下 */
@media(max-width:640px){

  /* FAQ全体 */
  .faq-toggle-switch_wrap{
    padding:24px 18px; /* スマートフォンでは内側余白を小さくする */
  }

  /* 質問部分 */
  .faq-toggle-switch_question{
    padding:14px; /* スマートフォンでは内側余白を小さくする */
  }

  /* 質問文 */
  .faq-toggle-switch_label{
    font-size:15px; /* スマートフォンでは文字を少し小さくする */
  }

  /* 回答 */
  .faq-toggle-switch_answer{
    padding:0 14px 14px; /* スマートフォンでは余白を小さくする */
    font-size:15px; /* スマートフォンでは文字を少し小さくする */
  }

}

// FAQのトグルスイッチをすべて取得
const faqToggleSwitchInputs =
  document.querySelectorAll(".faq-toggle-switch_switch input");

// 各トグルスイッチへ変更時の処理を設定
faqToggleSwitchInputs.forEach(function(input){

  input.addEventListener("change",function(){

    // 現在のFAQ項目を取得
    const item =
      input.closest(".faq-toggle-switch_item");

    // 対応する回答を取得
    const answer =
      item.querySelector(".faq-toggle-switch_answer");

    // スイッチのON・OFFに合わせて回答を表示・非表示にする
    answer.classList.toggle(
      "is-visible",
      input.checked
    );

  });

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLで質問、回答、トグルスイッチを配置し、CSSでFAQ全体とスイッチのデザインを設定します。JavaScriptでは各スイッチのON・OFFを取得し、対応する回答の表示・非表示を切り替えます。

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.htmlはFAQ・Q&A全体を構成するファイルです。「施設についてよくある質問」のタイトル、説明文、各質問、回答を編集できます。質問ごとにチェックボックスを利用したトグルスイッチを配置しており、それぞれの回答と組み合わせています。

style.cssはFAQ全体とトグルスイッチのデザインを設定するファイルです。全体の横幅や余白、背景色、枠線、角丸、質問と回答の文字サイズ、スイッチの大きさ、ON・OFF時の色などを変更できます。

script.jsは回答の表示・非表示を切り替えるファイルです。各トグルスイッチの状態が変更されたとき、同じFAQ項目内にある回答へis-visibleクラスを付け外しします。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。確認したい質問のトグルスイッチをONにすると、その質問に対応する回答が表示されます。OFFに戻すと回答が非表示になります。各スイッチは独立しているため、複数の回答を同時に表示することもできます。

カスタマイズできる内容
index.htmlではFAQのタイトル、説明文、質問文、「A.」を含む回答文を変更できます。faq-toggle-switch_item単位で項目を追加・削除することで、掲載する質問と回答の数も変更できます。

style.cssではFAQ全体の最大横幅、内側余白、背景色、枠線、角丸、FAQ項目同士の間隔、質問部分の高さや余白を変更できます。また、トグルスイッチの横幅・高さ、OFF時とON時の背景色、スイッチ内部の丸の大きさや移動量、回答文の文字色や余白なども調整できます。

数値調整
style.css
max-width:700px;
FAQ全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

margin:40px auto;
FAQ全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:32px;
FAQ全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。

border-radius:18px;
FAQ全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。

gap:14px;
FAQ項目同士の間隔です。値を大きくすると各質問の間隔が広がります。

border-radius:12px;
各FAQ項目の角丸です。値を大きくすると丸みが強くなります。

min-height:64px;
質問部分の最小高さです。値を大きくすると質問部分が高くなります。

padding:16px 18px;
質問部分の内側余白です。上下の16pxと左右の18pxを変更すると、質問文と枠線の間隔が変わります。

width:58px;・height:32px;
トグルスイッチ全体の横幅と高さです。値を変更するとスイッチ本体のサイズが変わります。

width:24px;・height:24px;
トグルスイッチ内部にある白い丸のサイズです。値を大きくすると丸が大きくなります。

transform:translateX(26px);
スイッチをONにしたときに白い丸を右方向へ移動させる距離です。26pxを変更すると移動量が変わります。

transition:.3s;
スイッチの色と丸の位置が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。

padding:0 18px 18px;
回答部分の内側余白です。左右と下側の値を変更すると、回答文と枠線の間隔が変わります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、画面幅に合わせてFAQ全体が縮小されます。また、640px以下ではFAQ全体をpadding:24px 18px;、質問部分をpadding:14px;へ変更し、質問文と回答文の文字サイズも15pxへ調整しています。スマートフォン・タブレット・PCで利用できます。