How to hide Elements in Javascript

user_13047750 0
Viewed 3942

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>

show hide html javascript
3 Answers

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>

user_14918950

Try to initially set the display of your step1 DIV to none. Either using inline styling or CSS.

You can also try to run your function on page load.

user_130480420

I just defined it as 'none' to begin with as such:

<div id="step1DIV" style="display: none">
user_110255420
Related