JavaScriptを使って要素を表示、非表示にする方法

JavaScriptを使って要素を表示、非表示にする方法

完成形はこちらです

要素を出す前の状態

要素を出した後の状態

このような実装をできるようにする為に必要なコードです。
2段階に分けて説明していきます。

header.html

<button id="button">表示 非表示ボタン</button>
<input id="input" placeholder="表示させたい要素">

header-script

$("#input").toggle();

$("#button").click(function() {
    $("#input").toggle();
});

1.表示させたいボタンと要素を作る

・buttonタグを作り、idを指定する(このidはJavaScriptで使うため指定しておく)
・inputタグで表示させたい要素を作る、これもidを指定しておく
・placeholderは文字や数字を表示することができます

header.html

<button id="button">表示 非表示ボタン</button>
<input id="input" placeholder="表示させたい要素">

このように作ります

2.要素を表示、非表示にするJavaScriptを書く

header-script

$("#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