javascripthtmlhideshow

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>