ボタンクリックで質問に対する回答を表示・非表示切り替えできるような、
ハイクオリティな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が１問増えるごとに、jQueryプログラムを１ブロック増やしていく必要があります。
これを汎用性が高くなるようにカスタマイズすると、
Q&Aが何問増えてもjQueryプログラムの追記が不要になります。
以下のページでは、このプログラムに汎用性を持たせるサンプルが紹介されています。ぜひ参考にしてみてください。
【関連記事】トグルで実現するシンプルなQ&Aページサンプル
