jQueryでの要素の表示と非表示【現役エンジニアが解説】

PROGRAM

今回は、jQueryでの要素の表示と非表示について、簡単に解説していきます。

要素の表示

jQueryでは要素を簡単に表示できます。

対象の要素にshowメソッドを使うだけです。

$('#hoge').show();

上記のコードでは、hogeのidの要素を表示させます。

要素の非表示

要素の非表示も容易にできます。

対象の要素にhideメソッドを使います。

$('#hoge').hide();

上記の例では、idがhogeの要素を非表示にさせます。

表示・非表示の切り替え

jQueryには要素の表示・非表示の切り替えをもっと楽にできます。

toggleメソッドで要素が表示中なら非表示に、非表示中なら表示に切り替えられます。

$('#hoge').toggle();

上記のコードの例では、hogeというidを持つ要素の表示・非表示の状態を切り替えます。