Telegramスポイラー - コンテンツを非表示にする方法

以下に、スポイラーを実装するための簡単な方法とコード例を示します。

1. HTMLとCSSを使用したスポイラー: まず、HTMLとCSSを使用してスポイラーを作成します。

HTMLコード例:

<div class="spoiler">
  <button class="spoiler-button">スポイラーを表示</button>
  <div class="spoiler-content">
    <!-- 非表示にするコンテンツをここに追加 -->
  </div>
</div>

CSSコード例:

.spoiler-content {
  display: none;
}
.spoiler-button {
  background-color: #f1f1f1;
  padding: 10px;
  border: none;
  cursor: pointer;
}
.spoiler-button:hover {
  background-color: #ddd;
}

このコードでは、スポイラーのコンテンツは最初は非表示に設定され、ボタンをクリックすると表示されます。

2. JavaScriptを使用したスポイラーの動的な表示: JavaScriptを使用して、スポイラーのコンテンツを動的に表示する方法もあります。

以下は、JavaScriptを使用したスポイラーのコード例です。

<div class="spoiler">
  <button class="spoiler-button" onclick="toggleSpoiler(this)">スポイラーを表示</button>
  <div class="spoiler-content">
    <!-- 非表示にするコンテンツをここに追加 -->
  </div>
</div>
<script>
function toggleSpoiler(button) {
  var content = button.nextElementSibling;
  if (content.style.display === "none") {
    content.style.display = "block";
    button.textContent = "スポイラーを非表示";
  } else {
    content.style.display = "none";
    button.textContent = "スポイラーを表示";
  }
}
</script>

このコードでは、ボタンをクリックするとJavaScriptが実行され、スポイラーのコンテンツが表示または非表示に切り替わります。