ボタンクリックで質問に対する回答を表示・非表示切り替えできるような、
ハイクオリティなQ&Aを実現するためには、jQuery、html、cssが必要です。

 

ここでは、上キャプチャのような形のQ&Aを作る手順をサンプルを見ながら紹介していきます。

HTMLで質問と回答の内容を記述する

まずは、HTMLでQ&Aを作っていきましょう。

HTML

 

トグルに対応させる(HTML、jQuery)

先ほど作ったQ&Aにトグルを対応させましょう。
トグルの基本については以下の記事を参考にしてみてください。

 

 

HTML

jQuery

 

デザインを整える(HTML,CSS)

上の段階でトグル式Q&Aは完成していますが、デザインがいまいちです。
なので、各要素にClassを付与し、CSSでデザインを整えていきましょう。

 

HTML

CSS

 

サンプル

上の内容を踏まえた上で、再度ソースコードをまとめると以下のようになります。

 

HTML

jQuery

CSS

 

【応用編】Q&Aが増えても対応できる汎用性が高いプログラムにカスタマイズする

上のプログラムでも十分なクオリティのQ&Aは作れるのですが、
ここではさらに一歩進んだカスタマイズについてみていきましょう。

 

運営を行う上で、Q&Aは増える可能性があるコンテンツでもあります。

 

現状のプログラムでは、Q&Aが1問増えるごとに、jQueryプログラムを1ブロック増やしていく必要があります。

 

これを汎用性が高くなるようにカスタマイズすると、
Q&Aが何問増えてもjQueryプログラムの追記が不要になります。

 

以下のページでは、このプログラムに汎用性を持たせるサンプルが紹介されています。ぜひ参考にしてみてください。

 

 

【関連記事】トグルで実現するシンプルなQ&Aページサンプル

 

 

おすすめの記事