使用JS单击按钮显示div

Question

我正试图通过单击一个按钮来创建一个显示其他内容的函数。

我得到了一个脚本，默认情况下会显示内容--如何切换它，以便默认情况下内容是隐藏，并且只在单击按钮时显示？

​

function revealContent() {
  var x = document.getElementById("additionalContent");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

<div class="col-10 text-center">
  <button class="btn btn-sm btn-primary" onclick="revealContent()">Show More Options...</button>
</div>

<div class="col-10" id="additionalContent">
  <p>Content!</p>
</div>

​

Answer 1

<div class="col-10" id="additionalContent" style="display:none">
   <p>Content!</p>
</div>

编辑:您必须添加style="display:none“，以便在加载页面时将其作为默认设置。