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に対しての設定をします。
例えば、以下のようにします。
この例では質問と回答文章の前にアイコン画像を表示させています。

スポンサーリンク

ページの先頭へ