jQueryを使って要素を表示させたり、非表示させたりする方法を紹介します。代表的な表示・非表示の動き方といえば、タブやアコーディオンといった動きを実装するときに用いられたりします。それでは、基本的な書き方を見ていきましょう。

jQueryで要素を表示させる

jQueryを使って要素を表示させるには以下のようなメソッドを使います。

show()メソッド

show()メソッドは、非表示になっている要素を表示することができます。

$(function() {
  $(".btn").click(function() {
    $(".photo img").show();
  });
});

slideDown()メソッド

slideDown()メソッドは、要素を上から下へスライドさせながら表示させることができます。

$(function() {
  $(".btn").click(function() {
    $(".photo img").slideDown();
  });
});

fadeIn()メソッド

fadeIn()メソッドは、要素をフェードインさせながら表示させることができます。

$(function() {
  $(".btn").click(function() {
    $(".photo img").fadeIn();
  });
});

jQueryで要素を非表示させる

jQueryを使って要素を非表示にするには以下のようなメソッドを使います。

hide()メソッド

hide()メソッドは、表示している要素を非表示にすることができます。

$(function() {
  $(".btn").click(function() {
    $(".photo img").hide();
  });
});

slideUp()メソッド

slideUp()メソッドは、要素を下から上へスライドさせながら非表示にしていくことができます。

$(function() {
  $(".btn").click(function() {
    $(".photo img").slideUp();
  });
});

fadeOut()メソッド

fadeOut()メソッドは、要素をフェードアウトさせながら非表示にすることができます。

$(function() {
  $(".btn").click(function() {
    $(".photo img").fadeOut();
  });
});

表示と非表示を切り替える

先程までのメソッドは、表示する場合、非表示にする場合の命令でしたが、今度は1つの要素の表示と非表示を切り替えるメソッドです。

toggle()メソッド

toggle()メソッドは、表示と非表示を繰り返すことができます。show()メソッドとhide()メソッドが繰り返し実行させる感じです。

$(function() {
  $(".btn").click(function() {
    $(".photo img").toggle();
  });
});

この場合、「.btn」要素がクリックされる度に「.photo」という要素を表示させたり、非表示させたりすることができます。

slideToggle()メソッド

slideToggle()メソッドは、上下にスライドしながら要素を表示したり非表示したりします。

$(function() {
  $(".btn").click(function() {
    $(".photo img").slideToggle();
  });
});

fadeToggle()メソッド

fadeToggle()メソッドは、フェードイン・フェードアウトしながら要素を表示したり非表示したりします。

$(function() {
  $(".btn").click(function() {
    $(".photo img").fadeToggle();
  });
});

このようなメソッドを応用すれば、アコーディオンパネルやタブ切り替えといった動きをつけることができます。

おすすめの記事