JavaScriptを使用してHide/Showボタンを作成する方法

スタイルの変更を使用する方法: この方法では、要素のdisplayプロパティを変更して非表示と表示を切り替えます。

HTML:

<button onclick="toggleElement()">Hide/Show</button>
<div id="elementToToggle">要素の内容</div>

JavaScript:

function toggleElement() {
  var element = document.getElementById("elementToToggle");
  if (element.style.display === "none") {
    element.style.display = "block";
  } else {
    element.style.display = "none";
  }
}

jQueryを使用する方法: jQueryはJavaScriptのライブラリで、簡潔なコードで多くのタスクを実行できます。Hide/Showボタンを作成するためにはjQueryを使用することもできます。

HTML:

<button id="toggleButton">Hide/Show</button>
<div id="elementToToggle">要素の内容</div>

JavaScript(jQuery):

$("#toggleButton").click(function() {
  $("#elementToToggle").toggle();
});

CSSクラスの追加/削除を使用する方法: この方法では、要素にCSSクラスを追加または削除して非表示と表示を切り替えます。

HTML:

<button onclick="toggleElement()">Hide/Show</button>
<div id="elementToToggle" class="hidden">要素の内容</div>

CSS:

.hidden {
  display: none;
}

JavaScript:

function toggleElement() {
  var element = document.getElementById("elementToToggle");
  element.classList.toggle("hidden");
}

これらの方法を使用してHide/Showボタンを作成することができます。必要に応じてコードをカスタマイズして、ウェブページに適用してください。