jQuery

【jQuery】showとhideで要素を表示、非表示にする方法

jQueryのメソッドの中で、HTML要素を直接操作するものがあります。
それが、要素を表示させる「show」と、非表示にさせる「hide」

要素を指定することで、表示させたり隠したりできるので、例えばクリックした時に動きをつけたり、動きのあるサイトが出来上がります。
これを使用してできるのが「アコーディオン」が有名です。試しに実装してみたのでここにまとめてみます。

showとhide

See the Pen
mZyBVa
by kei (@kei_01011)
on CodePen.


hideを使うと、要素を隠すことができます。
「click」と合わせて使うことで、「クリックした時に要素が隠れる」という処理をすることができます。

続いて「show」です。

See the Pen
ewmGRR
by kei (@kei_01011)
on CodePen.


hideとは逆で、「クリックした時に要素が表示させる」という処理をすることができます。
要素を表示させるので、指定する要素はCSSで「display:none;」として、通常は非表示の状態にしておきます。

これを少し応用すると、Webサイトでよく使われている動きを再現することができます。

hoverでマウスを乗せた時に表示、非表示する

See the Pen
QXwqzd
by kei (@kei_01011)
on CodePen.


HTML/CSSでも使っていた、hoverを使うと、マウスを乗せた時の動作をつけることができます。
hideとshowを組み合わせることで、以下のようになります。

マウスを乗せる → テキストが表示
マウスが外れる → テキストが非表示

→hoverの書き方

$(function(){
$(".title").hover(
function(){
 //マウスを乗せた時の処理
}, ←カンマが必要
function(){
 //マウスが外れた時の処理
});
});

 

jQueryでアコーディオンを作る

実際に、jQueryでアコーディオンを作ってみます。
アコーディオンは、LP(ランディングページ)などでよく使われていまして、「よくある質問」なんかで、クリックすると質問に対する回答が表示されるような仕組みです。
また、hideやshow以外にも、要素の表示に関するコードはいくつかあります。

See the Pen
ZdYaxm
by kei (@kei_01011)
on CodePen.


ここでは、slideUpとslideDownを使用していきます。

アコーディオンのコーディング

See the Pen
WqbXWy
by kei (@kei_01011)
on CodePen.


重要な箇所を抜粋して解説していきます
→ jQueryコード

$(function(){
$("p:not(:first)").hide();
  //:not(:first)で最初のp以外をhideにする
$(".panel > .title").on("click",function(){
$(".panel > p").slideUp(500);
  //.titleをクリックしたら、pを閉じる
$("+p" , this).slideDown(500);
  //this=クリックした要素(.title)
  //+p = .titleの次に出てくる最初のp要素(CSSだと.title+p)
});
});

まず、p要素をhideで非表示にしておきます。

 $(“p:not(:first)”).hide();
  //:not(:first)で最初のp以外をhideにする

ここで、p:not(:first)としておくと、初めのp要素だけが表示され、他のpのみにhideが適用されます。

 $(“.panel > .title”).on(“click”,function(){
$(“.panel > p”).slideUp(500);
  //.titleをクリックしたら、pを閉じる

タイトルのdiv要素をクリックした時、p要素をスライドアップして隠します。

 $(“+p” , this).slideDown(500);
  //this=クリックした要素(.title)
  //+p = .titleの次に出てくる最初のp要素(CSSだと.title+p)

thisはクリックした要素を取得するもので、ここではタイトルをクリックした時に「.title」を取得します。
「+p」は 次に出てくる最初のp要素という意味で、(“p”,this)とすることで、「クリックした要素の次に出てくる最初のp」という意味になります。

つまり、「クリックした.titleの次のp要素をslideDownで表示させる」ということになります。

まとめると以下のようになります。

  1. hideでp要素を非表示にしておく
  2. タイトルをクリックしたらp要素を閉じる
  3. クリックしたタイトルの次のp要素だけは、slideDownで表示

基礎を少しだけ応用した簡単なアコーディオンのコーディング方法をまとめてみました。
参考にしていただければ幸いです。