How to hide Elements in Javascript

I want that the text ist hidden in the beginning and after clicking the button it is displayed. I would be really greatfull if someone would find the mistake in my code.

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

<!DOCTYPE html>
<html>

<body>

  <button onclick="F1()"> <b>Step 1</b> </button>
  <div id="step1DIV">
    <p> text </p>
  </div>

</body>

</html>

Solution

You need to give it an initial style that hides it in the HTML.

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

  <button onclick="F1()"> <b>Step 1</b> </button>
  <div id="step1DIV" style="display: none;">
    <p> text </p>
  </div>

But inline styles are poor design, it's better to use a class with CSS.

function F1()
{
  var x = document.getElementById("step1DIV");
  x.classList.toggle("hidden");
}

.hidden {
  display: none;
}

<button onclick="F1()"> <b>Step 1</b> </button>
  <div id="step1DIV" class="hidden">
    <p> text </p>
  </div>