How to hide Elements in Javascript

Question

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>

style.display is not available until it's set. I recommend having .hide{ display:none; } in CSS then have Element.classList.add('hide') and Element.classList.remove('hide') or Element.classList.toggle('hide'). Unless you want to do a lot of typing, I generally recommend using CSS classes to style. — StackSlave
– StackSlave, Commented Mar 11, 2020 at 23:18

Barmar · Accepted Answer · 2020-03-11 23:18:51Z

2

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>

answered Mar 11, 2020 at 23:18

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ronnie Smith Over a year ago

even better to utilize the HTML standard attribute hidden

Barmar Over a year ago

@RonnieRoyston Classes and CSS are generally preferable because you can easily change the presentation in one place.

Ronnie Smith Over a year ago

Specifically speaking to hiding elements though: The hidden attribute

iPat · Accepted Answer · 2020-03-11 23:25:36Z

0

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

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

answered Mar 11, 2020 at 23:25

iPat

215 bronze badges

Comments

j3ff · Accepted Answer · 2020-03-11 23:37:41Z

0

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.

edited Mar 11, 2020 at 23:37

j3ff

6,2098 gold badges46 silver badges56 bronze badges

answered Mar 11, 2020 at 23:21

ldelosreyes

11 bronze badge

Comments

Ronnie Smith · Accepted Answer · 2023-01-29 22:45:19Z

0

You want to toggle the hidden attribute defined in the HTML Standard.

function F1 () {
  document.getElementById("a").toggleAttribute("hidden");
}

<!DOCTYPE html>
<html>

<body>

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

</body>

</html>

answered Jan 29, 2023 at 22:45

Ronnie Smith

18.8k7 gold badges89 silver badges99 bronze badges

Collectives™ on Stack Overflow

How to hide Elements in Javascript

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related