※本サイトにはプロモーションが含まれます。

jQuery|要素の表示・非表示を切り替えるshow、hide、toggleの使い方

jQuery

jQueryを使って要素表示非表示を切り替える方法を紹介します。

.css()displayのプロパティ値を変更しても良いのですが、show、hide、toggleの3つのメソッドを使った方が簡単です。

.show().hide()が効かない場合の対処法についても触れます。

スポンサーリンク

jQueryで要素の表示・非表示を切り替える方法

要素を表示 ( show )

.show()は指定した要素をdisplay: blockに設定します。

.css()を使った以下の処理と同じ意味です。

デモ

「show」ボタンのクリックで非表示になっている#demo-01の要素を表示し、「reset」ボタンのクリックで元に戻します。

 

要素を非表示 ( hide )

.hide()は指定した要素をdisplay: noneに設定します。

.css()を使った以下の処理と同じ意味です。

デモ

「hide」ボタンのクリックで表示されている#demo-02の要素を非表示にし、「reset」ボタンのクリックで元に戻します。

 

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

.toggle()は指定した要素が表示されていればdisplay: noneを設定し、非表示ならdisplay: blockを設定します。

以下の処理と同じ意味です。

.show().hide()を交互に実行します。

デモ

「toggle」ボタンをクリックする度に#demo-03の要素の表示・非表示が切り替わります。

jQueryのshowやhideが効かない場合

jQueryの.show().hide()を実行しても効かないことがあります。

この原因としてはCSSでdisplay: none !importantのように!important指定がされている可能性があります。

こういった場合は.css()を使って!importantを設定すれば良いのですが、以下のコードではimportantが付与されません。

正しく動作させるには次のようにcssTextというプロパティを使用してください。

スポンサーリンク

フォローする

コメント

  1. sato より:

    このページの冒頭にある「目次」の各ソース(HTML、CSS、JavaScript)が一番知りたいです。
    こういう仕様の目次って、すごく需要があると思います!
    問題の解答だけを知りたがるようアレですが、見せてもらうことはできませんか?

    • TAKA より:

      記事の目次は、WordPressのプラグイン「Table of Contents Plus(TOC+)」で表示させています。
      コメント欄では解説しきれませんので、TOC+のソースをご確認ください。