JavaScriptでHTML要素の表示・非表示を切り替える方法

この記事では、JavaScriptを用いてHTML要素の表示・非表示を切り替える方法について例を用いて説明をしていきたいと思います。

HTML要素の表示・非表示を切り替える例

・HTML

<input type="button" id="displayHide" value="表示・非表示"></input>
<ul id="fruits">
  <li>リンゴ</li>
  <li>バナナ</li>
  <li>オレンジ</li>
</ul>

・CSS

#fruits.hide {
  display: none;
}

・JavaScript

let displayHide = document.getElementById("displayHide");
let fruits = document.getElementById("fruits");

displayHide.addEventListener("click", () => {
  fruits.classList.toggle("hide");
});

まずはJavaScriptで「displayHide」というId名をキーにHTMLのinput要素を取得します。
同じように、「fruits」というId名をキーにHTMLのul要素を取得します。
そして、addEventListner()を用いてHTMLのinput要素をクリックした時にclassList.toggle()を用いて「fruits」に「hide」というクラス名を付けたり外したりします。
そうすることによって、input要素をクリックした時に、ul要素を表示したり非表示にしたりすることができます。

では結果を見てみましょう。

こうですね。
ちゃんとボタンをクリックする度に表示・非表示が切り替わっていますね。

まとめ

このように、JavaScriptでaddEventListener()とclassList.toggle()を組み合わせて使うことで
イベント発生時にHTML要素を表示させたり非表示にしたりすることができます。