jQueryを使って要素の表示・非表示を切り替える方法を紹介します。
.css()
でdisplay
のプロパティ値を変更しても良いのですが、show、hide、toggleの3つのメソッドを使った方が簡単です。
.show()
や.hide()
が効かない場合の対処法についても触れます。
目次
jQueryで要素の表示・非表示を切り替える方法
要素を表示 ( show )
.show()
は指定した要素をdisplay: block
に設定します。
1 |
$('#elem').show(); |
.css()
を使った以下の処理と同じ意味です。
1 |
$('#elem').css('display', 'block'); |
デモ
「show」ボタンのクリックで非表示になっている#demo-01
の要素を表示し、「reset」ボタンのクリックで元に戻します。
1 2 3 |
<div id="demo-01"></div> <button id="btn-show-01">show</button> <button id="btn-reset-01">reset</button> |
1 2 3 4 5 6 |
#demo-01 { display: none; background: red; width: 100px; height: 100px; } |
1 2 3 4 5 6 7 8 9 10 11 |
$(function() { // showボタン $('#btn-show-01').click(function() { $('#demo-01').show(); }); // resetボタン $('#btn-reset-01').click(function() { $('#demo-01').hide(); }); }); |
要素を非表示 ( hide )
.hide()
は指定した要素をdisplay: none
に設定します。
1 |
$('#elem').hide(); |
.css()
を使った以下の処理と同じ意味です。
1 |
$('#elem').css('display', 'none'); |
デモ
「hide」ボタンのクリックで表示されている#demo-02
の要素を非表示にし、「reset」ボタンのクリックで元に戻します。
1 2 3 |
<div id="demo-02"></div> <button id="btn-hide-02">hide</button> <button id="btn-reset-02">reset</button> |
1 2 3 4 5 |
#demo-02 { background: green; width: 100px; height: 100px; } |
1 2 3 4 5 6 7 8 9 10 11 |
$(function() { // hideボタン $('#btn-hide-02').click(function() { $('#demo-02').hide(); }); // resetボタン $('#btn-reset-02').click(function() { $('#demo-02').show(); }); }); |
要素の表示・非表示の切り替え ( toggle )
.toggle()
は指定した要素が表示されていればdisplay: none
を設定し、非表示ならdisplay: block
を設定します。
1 |
$('#elem').toggle(); |
以下の処理と同じ意味です。
.show()
と.hide()
を交互に実行します。
1 2 3 4 5 |
if ($('#elem').css('display') == 'none') { $('#elem').show(); } else { $('#elem').hide(); } |
デモ
「toggle」ボタンをクリックする度に#demo-03
の要素の表示・非表示が切り替わります。
1 2 |
<div id="demo-03"></div> <button id="btn-toggle-03">toggle</button> |
1 2 3 4 5 |
#demo-03 { background: blue; width: 100px; height: 100px; } |
1 2 3 4 5 6 |
$(function() { // toggleボタン $('#btn-toggle-03').click(function() { $('#demo-03').toggle(); }); }); |
jQueryのshowやhideが効かない場合
jQueryの.show()
や.hide()
を実行しても効かないことがあります。
この原因としてはCSSでdisplay: none !important
のように!important
指定がされている可能性があります。
こういった場合は.css()
を使って!important
を設定すれば良いのですが、以下のコードではimportant
が付与されません。
1 |
$('#elem').css('display', 'block !important'); |
正しく動作させるには次のようにcssText
というプロパティを使用してください。
1 |
$('#elem').css('cssText', 'display: block !important'); |
コメント
このページの冒頭にある「目次」の各ソース(HTML、CSS、JavaScript)が一番知りたいです。
こういう仕様の目次って、すごく需要があると思います!
問題の解答だけを知りたがるようアレですが、見せてもらうことはできませんか?
記事の目次は、WordPressのプラグイン「Table of Contents Plus(TOC+)」で表示させています。
コメント欄では解説しきれませんので、TOC+のソースをご確認ください。