ボタンクリック時にテキストを表示・非表示にする方法

方法1: JavaScriptを使用した方法

HTMLのボタンと表示するテキストを以下のように作成します:

<button id="toggleButton">表示切り替え</button>
<p id="hiddenText" style="display: none;">表示するテキスト</p>

次に、JavaScriptコードを追加します:

var button = document.getElementById("toggleButton");
var hiddenText = document.getElementById("hiddenText");
button.addEventListener("click", function() {
  if (hiddenText.style.display === "none") {
    hiddenText.style.display = "block";
  } else {
    hiddenText.style.display = "none";
  }
});

上記のコードでは、ボタンがクリックされると、テキストの表示状態が切り替わります。テキストの初期状態は非表示に設定されており、ボタンクリックで表示・非表示が切り替わります。

方法2: jQueryを使用した方法

jQueryを使用すると、より簡潔なコードで同じ機能を実現できます。まず、jQueryを読み込んでください:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

次に、以下のHTMLとJavaScriptコードを追加します:

<button id="toggleButton">表示切り替え</button>
<p id="hiddenText" style="display: none;">表示するテキスト</p>
<script>
  $(document).ready(function() {
    $("#toggleButton").click(function() {
      $("#hiddenText").toggle();
    });
  });
</script>

上記のコードでは、jQueryのtoggle()関数を使用してテキストの表示・非表示を切り替えています。

以上の方法で、ボタンクリック時にテキストを表示・非表示にすることができます。必要に応じて、スタイルやアニメーションをカスタマイズすることもできます。