JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【初心者向け】jQueryのhide()とshow()でHTMLタグを非表示・再表示する方法

はじめに

Webページ上の既存のHTML要素を一時的に取り除き、あとから再び表示したい場面はよくあります。そんなときに便利なのが、jQueryが提供するhide()メソッドとshow()メソッドです。この2つのメソッドを使えば、ボタン操作ひとつでページ内のコンテンツを簡単に「削除（非表示）」したり「追加（表示）」したりできます。

用意するボタン

まず、コンテンツを隠すためのボタンと、再表示するためのボタンの2つをHTMLに配置します。

<button type="submit" id="hide">クリックすると上記のコンテンツを非表示にします</button>
<button type="submit" id="show">クリックすると上記のコンテンツを表示します</button>

hide() と show() の基本的な使い方

ボタンがクリックされたときに対象のタグを非表示・表示に切り替えるには、以下のようにイベントハンドラ内で hide() と show() を呼び出します。

$(document).ready(function(){
    $("#hide").click(function(){
        $("h1").hide();
    });
    $("#show").click(function(){
        $("h1").show();
    });
});

完全なサンプルコード

実際に動作させることができる、完全なHTMLコードは以下の通りです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<h1>Test JavaScript</h1>
<button type="submit" id="hide">クリックすると上記のコンテンツを非表示にします
</button>
<button type="submit" id="show">クリックすると上記のコンテンツを表示します
</button>
<script>
    $(document).ready(function(){
        $("#hide").click(function(){
            $("h1").hide();
        });
        $("#show").click(function(){
            $("h1").show();
        });
    });
</script>
</body>
</html>

プログラムの実行方法

上記のプログラムを実行するには、ファイル名を「anyName.html（index.html）」として保存します。そのあと、保存したファイルを右クリックし、VS Codeエディターの場合は「Open with Live Server」を選択してブラウザーで開いてください。

出力結果

プログラムを実行すると、以下のような画面が表示されます。

【初心者向け】jQueryのhide()とshow()でHTMLタグを非表示・再表示する方法

ケース1：非表示にする場合

「クリックすると上記のコンテンツを非表示にします」というボタンをクリックすると、h1タグのテキストが消え、次のような表示になります。

【初心者向け】jQueryのhide()とshow()でHTMLタグを非表示・再表示する方法

ケース2：再表示する場合

「クリックすると上記のコンテンツを表示します」というボタンをクリックすると、先ほど非表示になったh1タグのテキストが再び現れます。

【初心者向け】jQueryのhide()とshow()でHTMLタグを非表示・再表示する方法

まとめ

このように、jQueryのhide()とshow()を組み合わせることで、HTML要素の削除と追加を直感的なボタン操作で実現できます。CSSでdisplayプロパティを直接操作する方法もありますが、jQueryを使うと少ないコード量で簡潔に書けるのが大きなメリットです。ぜひ実際のプロジェクトでも活用してみてください。

  1. JavaScriptでIDを指定して要素を削除する方法

    JavaScriptでIDを指定して要素を削除するIDを使ってHTML要素を削除するには、remove()メソッドを使用します。このメソッドは、対象のDOM要素をドキュメントから直接取り除くことができる、最もシンプルで直感的な方法です。コード例以下は実際のサンプルコードです。<!DOCTYPE html> <html lang=ja> <head>    <meta charset=UTF-8>    <meta name=viewport content=width=device-width, in

  2. JavaScriptでtrタグのidを取得し、新しいtdセルに表示する方法

    はじめにHTMLテーブルの各行（<tr>タグ）に設定されたid属性を取得し、それを新しい<td>セルとして表示したいケースは開発現場でよく見られます。本記事では、JavaScriptのdocument.querySelectorAll()メソッドとinsertCell()メソッドを組み合わせて実現する方法を、実際のコード例とともにわかりやすく解説します。サンプルテーブルの準備まず、例として次のようなテーブルを用意します。<table>   <tr id=StudentDetails>      &