先日やっていた模写サイトにトグル（アコーディオン)メニューがあったので、一から学びなおしてここにまとめておきます。
コピペすればすぐ使えるので、仕組みがよくわからなくても読む価値ありです。
１．超基礎！トグル１つだけ
See the Pen
by awakoji (@awakoji)
on CodePen.
まず、基本中の基本。トグルで表示非表示を切り替えるのは、『slideToggle』です。これがあることで、クリックするたびに、表示を切り替えられます。
トグルメニューは基本、最初は見えていないので、『hide』で隠しておきます。これは、CSSで『display:none;』としても問題ありません。
２．トグル表示複数
See the Pen
by awakoji (@awakoji)
on CodePen.
次は、クリックして表示を切り替えるものが複数ある場合です。HTMLに記載するクラス名はいずれも同じで問題ありません。
jsで必要になってくるコードが、『$(this).next()』です。これは、』クリックしたtoggleクラス要素の次の要素』を意味します。
ひとつ前で説明した、コードではクリックするとクリック１～３の中身が一緒にニョキっとでてくるので注意しましょう
３．ブレイクポイント付き
See the Pen
by awakoji (@awakoji)
on CodePen.
実際、トグルメニューを作るときは、ブレイクポイントを入れるケースが多いのではないかと思います。
今回、僕が模写していたサイトもブレイクポイントがサイズが小さくなってくると、トグルメニューになるコードでした。
ブレイクポイントは、ifを入れればOKです。
４．複数あるがトグルさせるのは１つだけ
See the Pen
by awakoji (@awakoji)
on CodePen.
ここまでで紹介したのは、複数トグルさせることが可能なコードでした。
次は、トグルできるのが１つの場合、つまり2つ目をトグルさせようとすると、一つ目が隠れるような仕様にするケースです。
使うのは『not』です。『【クリックした.toggleじゃない、別の.toggle】の次の要素』をslideUpさせます。
５．クリックすると矢印がクルッと回る
See the Pen
by awakoji (@awakoji)
on CodePen.
CSSのお勉強。トグルするときに矢印を上下さかさまにします。矢印の作り方は、『border』で作ると楽ちんです。(僕はfontawesomeでやってました。) 矢印の配置は、flexが使えます。
transformの値が変わった時に動きが出るように、『transition』で秒を設定しましょう。
んで、openというクラスが加わったときに、180回転。このopenクラスを出し入れするコードをjsに書く必要があります。
使うのは、『toggleClass』。openクラスがあれば、挿入、なければ削除するという役割があります。
参考サイト
今回参考にしたのは、以下の動画です。
すごく丁寧に説明してくれているので、そっこーでチャンネル登録しました。