上のキャプチャのような、トグルで質問への回答の表示・非表示を切り替えるサンプルプログラムを紹介します。

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

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

HTML

 

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

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

 

 

jQuery

 

デザインを整える(CSS)

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

 

CSS

 

関連記事

おすすめの記事