【Jquery】表示・非表示ボタンの超簡単な作り方

今回は、ある要素の表示・非表示を切り替えるボタンの作成についてまとめてみました。

今回はJqueryプラグインを使用して導入を行います。

スポンサーリンク
レクタングル(大)

表示・非表示ボタン導入方法

まずは簡単に、ただ表示・非表示のみの処理を見ていきましょう。

「表示非表示切り替え」のボタンを押すことで、指定した要素を表示するか、非表示にするかを切り替えます。

ボタンに「data-area」属性をつけており、表示と非表示を切り替えたい要素を選択します。
今回はclassの「sample_area」の表示を切り替えたいので、指定は「.sample_area」となります。idなら#にしましょう。

そして、JavaScriptでボタンを押した時のイベントを設定し、「data-area」属性で設定された要素を切り替える記述を書きましょう。

「toggle」メソッドは、その要素が表示されていれば非表示、逆に非表示なら表示に切り替える便利なメソッドです。

指定した要素がしっかり切り替わっていれば成功です。

スポンサーリンク
レクタングル(大)
レクタングル(大)

フォローする