jQueryを実際に書いていくための準備

htmlのheadとbody、jQueryのファイルにそれぞれ以下の内容を記入する。

【モーダルを作成する】

モーダルとはクリックした時に表示させるもの。

例えばログインボタンを押したら、ログインフォームを表示させるなど。

・モーダルを１箇所表示させる。

①CSSの該当要素にdisplay:noneをかける。これはクリックするまでは見せないようにするため。

②script.jsにクリックイベントを作成し、クリックしたらfadeInメソッドを使ってモーダルを表示させる。

・同じモーダルを２つのボタンから表示させる場合

※2箇所に同じclickイベントを設定する場合は、新規登録のボタンにはidではなくclassを使用する。

①htmlに同じクラス名をそれぞれのボタンにつける。

（クラスを二つつける場合は、一つ目のクラス名から半角開けて記入する）

②script.jsにクリックイベントでクラス名がクリックされた時に、ログインフォームが表示させるようにfadeInメソッドを使用して記述する。

【モーダルを一つ隠すor２つ隠す】

script.jsのみに記述する。クリックした時に該当クラスをfadeOutさせる。

【hoverイベントでaddClassとremoveClassを使う】

hoverイベントとはカーソルが乗った時に表示させるもの。

htmlとcssで通常時は表示させないようにdisplay:none、カーソルが乗った時に表示させるようにdisplay:blockを指定する。

・addClass　既存のクラスに追加することができる。

・removeClass 既存のクラスから削除することができる。

・toggleClass("");　addClassとremoveClassを両方を合わせた様に使えるメソッド。

【アコーディオンを作成する】

アコーディオンとはクリックした時に、テキストを表示させるアニメーション。

概要はif文を使って、もし該当クラスを持っていたら、テキストをオープンにし、テキストが開いている場合は閉じる。

オープンにした際に右上の表示を閉じるボタン（ー）、通常時は開くボタン（＋）にするための記述を書く。

コードの記述例と実際の表示例

jQuery 中級編