jQueryで開閉式FAQを実装する

質問の文章をクリックしたら、回答の文章が開きその下に表示されるWebページがあります。
それだと不必要な質問の回答は折りたたまれているためスペースの節約になります。
そのような開閉式のFAQをjQueryで実装する方法を解説します。

下記は、そのような開閉式FAQの一例です。
開閉式FAQの例

【記事執筆時の確認環境】
jQuery 1.11.0

jQueryを利用した関数を定義する

以下のコードを記述したjsファイルを作成します。

この関数を使うにあたっての仕様は以下のようになります。
・「class="faqs"」を設定した要素の中にあるdtタグに質問文章を記述します。
・「class="faqs"」を設定した要素の中にあるddタグに回答文章を記述します。
・ddタグは最初閉じていますが、dtタグをクリックするたび[開]-[閉]を繰り返します。

作成したjsファイルとjQuery本体をインクルードする

先ほどの関数を定義したjsファイルとjQuery本体ファイルを、Webページにインクルードする記述を以下のように追加します。

FAQの文章をページに記述する

開閉式FAQを設置したい場所に以下のように質問と回答を記述します。

CSSを設定する

CSSファイルに、クラスfaqsに対しての設定をします。
例えば、以下のようにします。
この例では質問と回答文章の前にアイコン画像を表示させています。

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ