##JavaScriptを使って要素を表示、非表示にする方法
このような実装をできるようにする為に必要なコードです。
2段階に分けて説明していきます。
<button id="button">表示 非表示ボタン</button>
<input id="input" placeholder="表示させたい要素">
$("#input").toggle();
$("#button").click(function() {
$("#input").toggle();
});
#1.表示させたいボタンと要素を作る
・button
タグを作り、idを指定する(このidはJavaScriptで使うため指定しておく)
・input
タグで表示させたい要素を作る、これもidを指定しておく
・placeholder
は文字や数字を表示することができます
<button id="button">表示 非表示ボタン</button>
<input id="input" placeholder="表示させたい要素">
#2.要素を表示、非表示にするJavaScriptを書く
$("#input").toggle();
$("#button").click(function() {
$("#input").toggle();
});
・("#input")
ここには表示、非表示にしたい要素を書く
・("#button")
どこをクリックした時にイベント処理が始まるかを指定する、idを指定したbuttonを指定する
・toggle
とは要素がついていれば外す、要素が付いていなければ付けてくれる。toggle
と書くだけで2つのことをしてくれるのでとても便利です。
・$("#input").toggle();
1行目にこの1行を足すことで最初の表示を非表示にしてくれます
こちらの記述で実装が完成します。
ボタンを押すと表示、非表示にすることができました。
#まとめ
toggleを使うことでクリックなどの操作によって、2つの状態を交互に切り替える
ことができるという仕組みなので、皆さんも是非toggle
を使ってみてください!
最後に、これからも日々のアウトプットとして投稿していきます。
よろしくお願いします。
#参考にした記事
https://techacademy.jp/magazine/9540
https://itsakura.com/jquery-toggle
https://qiita.com/sunnyG/items/faf1821ae09820e30ce8
30分で理解!jQueryのtoggle()と3種のメソッド活用術!
https://www.sejuku.net/blog/40705