LoginSignup
1

More than 1 year has passed since last update.

JavaScriptで要素の表示、非表示を切り替える。

Posted at

アプリ開発時、要素の表示や非表示を1つのボタンでできないか疑問に思い、備忘録としてまとめます。
イメージは、下記の画像のように「表示非表示ボタン」を押す度に、・aaaaaが表示、非表示を繰り返すようにしたいです。

スクリーンショット 2022-04-28 14.41.14.png

スクリーンショット 2022-04-28 14.42.08.png

結論

・toggleを使う。

コード

index.html
<button id="button">表示 非表示ボタン</button>
<ul>
  <li id="list" class="hidden">
    aaaaa
  </li>
</ul>
style.css
.hidden {
  display: none;
}
index.js
const btn = document.getElementById("button");
const list = document.getElementById("list");

btn.addEventListener("click",function(){
 list.classList.toggle("hidden")
});

解説

・id="list"の要素はdisplay: none;により、隠れて見えない状態になっている。
btn.addEventListener("click",function(){ list.classList.toggle("hidden") });
→ボタンをクリックした時に、id="list"の要素にhiddenクラスを追加、削除を行えるようにしている。

まとめ

toggleは、クリックなどの同じ操作によって、二つの状態を交互に切り替えられるような仕組み。

参考記事

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
1