【jQuery】要素の表示・非表示を簡単に実装する方法

2023年2月6日2023年7月9日

本記事では、要素の表示・非表示をCSSを使わずにjQueryのみで簡単に実装する方法について解説しています。

JavaScriptの学習におすすめ書籍

1冊ですべて身につくJavaScript入門講座

総合評価

( 5 )

メリット

誰でも分かるように嚙み砕いて説明してくれる
アニメーションの知識が深く学べる
1つのWebサイトを作りながら学べる

1冊ですべて身につくJavaScript入門講座 [ Mana ]

楽天ブックス

¥2,794 （2023/09/23 22:33時点 | 楽天市場調べ）

Amazonで探す

楽天市場で探す

Yahoo!ショッピングで探す

ポチップ

先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！

Amazon Kindle Unlimited

全プログラマー必見！
変数名/関数名にもう悩まない！

リーダブルコード

総合評価

( 5 )

メリット

美しいコードが書けるが自然と書けるようになる
他の開発者が理解しやすいコードになる

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤功平, 翻訳:角征典

¥2,640 （2023/07/23 02:48時点 | Amazon調べ）

Amazonで探す

楽天市場で探す

Yahoo!ショッピングで探す

ポチップ

要素を非表示するhide()

要素を非表示にするには、hide()メソッドを使用します。使い方は以下のとおりです。

$("セレクタ").hide();

先輩くん

ボタンをクリックしたら要素が非表示になるサンプルコードを用意したので、動作確認してみましょう！

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <p id="point">ボタンをクリックすると非表示になるよ！</p>
    <button id="btn">ボタン</button>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="index.js"></script>
  </body>
</html>

$("#btn").on("click", function () {
  $("#point").hide();
});

要素を表示するshow()

要素を表示にするには、show()メソッドを使用します。使い方は以下のとおりです。

$("セレクタ").show();

先輩くん

ボタンをクリックしたら要素が表示されるサンプルコードを用意したので、動作確認してみましょう！

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <p id="point" style="display:none;">要素が表示されたよ！</p>
    <button id="btn">ボタン</button>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="index.js"></script>
  </body>
</html>

$("#btn").on("click", function () {
  $("#point").show();
});

要素の表示・非表示を繰り返すhide()

ユーザーがアクションを起こした際に要素の表示・非表示を繰り返す処理を実装をする場合、先ほど紹介したhide()メソッドとshow()メソッドを使って実装することは可能です。しかし、特定のクラスやdata属性の値などを付与して、出し分ける必要があり少し手間がかかります。

そこで、今回はそんな手間を全て省略して簡潔に実装できるtoggle()メソッドを紹介します。使い方は以下のとおりです。

$("セレクタ").toggle();

先輩くん

ボタンをクリックすると表示・非表示を繰り返すサンプルコードを用意したので、動作確認してみましょう！

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <p id="point">ボタンをクリックすると表示・非表示を繰り返すよ！</p>
    <button id="btn">ボタン</button>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="index.js"></script>
  </body>
</html>

$("#btn").on("click", function () {
  $("#point").toggle();
});

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！