【jQuery】要素の表示・非表示について (show, hide, toggle)

jQuery
スポンサーリンク

jQueryで要素の表示・非表示を切り替える方法についてです。

要素の非表示 ( hide )

hideメソッドを使うと要素を隠すことができます。引数には非表示にする際の時間と、コールバック関数を指定できます。

<body>
    <button>click</button>
    <p>表示されてるメッセージ</p>
</body>

$(function() {
    $('button').click(function(){
        $('p').hide();
    });
});

.hide()はcss('display', 'none')と同じ意味です。

$(function() {
    $('button').click(function(){
        $('p').css('display', 'none');
    });
});

 .hide() | jQuery 1.9 日本語リファレンス | js STUDIO

サンプル

表示されてるメッセージ

要素の表示 ( show )

showメソッドを使うとdisplay: none;で非表示になっている要素を表示できます。引数には非表示にする際の時間と、コールバック関数を指定できます。

<body>
    <button>click</button>
    <p style="display: none;">隠されてるメッセージ</p>
</body>

$(function() {
    $('button').click(function(){
        $('p').show();
    });
});

.show()はブロック要素の場合のcss('display', 'block')と同じ意味です。

$(function() {
    $('button').click(function(){
        $('p').css('display', 'block');
    });
});

 .show() | jQuery 1.9 日本語リファレンス | js STUDIO

サンプル

要素の表示・非表示の切り替え ( toggle )

toggleメソッドを使うと showメソッドと hideメソッドを交互に実行します。引数には非表示にする際の時間と、コールバック関数を指定できます。

<body>
    <button>click</button>
    <img src="../jquery.jpg"/>
</body>

$(function() {
    $('button').click(function(){
        $('img').toggle();
    });
});

.toggle()は引数に true を指定すれば.show()、false を指定した場合は.hide()が実行されます

$(function() {
    $('button').click(function(){
        $('p').toggle(true);
    });
});

 .toggle() | jQuery 1.9 日本語リファレンス | js STUDIO

サンプル

f:id:tasukujp:20150112005353g:plain