0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-10-20

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

###完成形はこちらです
要素を出す前の状態
image.png

要素を出した後の状態
image.png

このような実装をできるようにする為に必要なコードです。
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="表示させたい要素">

このように作ります
image.png

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

header-script
$("#input").toggle();

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

("#input")ここには表示、非表示にしたい要素を書く
("#button")どこをクリックした時にイベント処理が始まるかを指定する、idを指定したbuttonを指定する
toggleとは要素がついていれば外す、要素が付いていなければ付けてくれる。toggleと書くだけで2つのことをしてくれるのでとても便利です。
$("#input").toggle();1行目にこの1行を足すことで最初の表示を非表示にしてくれます

こちらの記述で実装が完成します。
ボタンを押すと表示、非表示にすることができました。
image.png

image.png

#まとめ
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

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?