2020年1月22日jQueryのメソッドの中で、HTML要素を直接操作するものがあります。要素を指定することで、表示させたり隠したりできるので、例えばクリックした時に動きをつけたり、動きのあるサイトが出来上がります。これを使用してできるのが「アコーディオン」が有名です。試しに実装してみたのでここにまとめてみます。CodePen.hideを使うと、要素を隠すことができます。「click」と合わせて使うことで、「クリックした時に要素が隠れる」という処理をすることができます。続いて「show」です。CodePen.hideとは逆で、「クリックした時に要素が表示させる」という処理をすることができます。要素を表示させるので、指定する要素はCSSで「display:none;」として、通常は非表示の状態にしておきます。これを少し応用すると、Webサイトでよく使われている動きを再現することができます。CodePen.HTML/CSSでも使っていた、hoverを使うと、マウスを乗せた時の動作をつけることができます。hideとshowを組み合わせることで、以下のようになります。//マウスが外れた時の処理});});jQueryでアコーディオンを作る実際に、jQueryでアコーディオンを作ってみます。アコーディオンは、LP(ランディングページ)などでよく使われていまして、「よくある質問」なんかで、クリックすると質問に対する回答が表示されるような仕組みです。hideやshow以外にも、要素の表示に関するコードはいくつかあります。CodePen.ここでは、slideUpとslideDownを使用していきます。.titleの次に出てくる最初のp要素(CSSだと.title+p)});});まず、p要素をhideで非表示にしておきます。$(“p:not(:first)”).hide();//:not(:first)で最初のp以外をhideにするここで、p:not(:first)としておくと、初めのp要素だけが表示され、他のpのみにhideが適用されます。p”).slideUp(500);//.titleをクリックしたら、pを閉じるタイトルのdiv要素をクリックした時、p要素をスライドアップして隠します。.titleの次に出てくる最初のp要素(CSSだと.title+p)thisはクリックした要素を取得するもので、ここではタイトルをクリックした時に「.title」を取得します。次に出てくる最初のp要素という意味で、(“p”,this)とすることで、「クリックした要素の次に出てくる最初のp」という意味になります。「クリックした.titleの次のp要素をslideDownで表示させる」ということになります。まとめると以下のようになります。基礎を少しだけ応用した簡単なアコーディオンのコーディング方法をまとめてみました。参考にしていただければ幸いです。BlogスポンサーリンクスポンサーリンクSearchWebコーダーKohei8年勤めた職場を退職し、完全未経験からWebコーダーに転職しました。