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

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

結論

・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は、クリックなどの同じ操作によって、二つの状態を交互に切り替えられるような仕組み。

参考記事