在隐藏和显示元素之间切换

Question

Im learning how to program and I would like to toggle between hiding and showing an element with JavaScript. The script is shown below. It works but instead of showing the solution once the program runs, I would like to have it hidden so that the user can click and see the solution. I would like to have it the other way round. I've tried with 'display:none' but it stops working. I know its easy but I cant make it work. Can you help me?

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

 #solution { width: 100%; padding: 50px 0; text-align: center; background-color: lightblue; margin-top: 20px; } 

 <button onclick=" SolutionFunction ()">Try it</button> <div id=" solution "> This is the solution. </div> 

Answer 1

On default, the display parameter is empty, when you get it with x.style.display , because this only look on element properties, and not the CSS styles. So you could check if it is empty.

And you need to remove the spaces around the id to make it working.

 function SolutionFunction() { var x = document.getElementById("solution"); if (x.style.display === "") { x.style.display = "block"; } else { x.style.display = ""; } } 

 #solution { width: 100%; padding: 50px 0; text-align: center; background-color: lightblue; margin-top: 20px; display: none; } 

 <button onclick=" SolutionFunction ()">Try it</button> <div id="solution"> This is the solution. </div> 

Or you put the display: none to the style attribute of the element, and your code will work too:

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

 #solution { width: 100%; padding: 50px 0; text-align: center; background-color: lightblue; margin-top: 20px; } 

 <button onclick=" SolutionFunction ()">Try it</button> <div id="solution" style="display: none;"> This is the solution. </div> 

Answer 2

You can use the hidden attribute/property on the element to toggle the visibility instead.

You should also remove any spaces you have in id="" to be able to properly get the element by id

 function SolutionFunction() { var x = document.getElementById("solution"); x.hidden = !x.hidden } 

 #solution { width: 100%; padding: 50px 0; text-align: center; background-color: lightblue; margin-top: 20px; } 

 <button onclick=" SolutionFunction ()">Try it</button> <div id="solution" hidden> <!-- hidden by default --> This is the solution. </div> 

Using the hidden = true|false method to toggle the visibility is a better approach since you don't always know how a element display property should be handled after you reset the display style. You might want to have the element rendered as inline-block or if it's a <tr> it should be rendered as row and not a block

---

Another possible solution if you will is the <details> element but it don't work in Internet explorer or Edge yet. but it looks simular to what you try to accomplish and don't require any javascript.

See browser support here https://caniuse.com/#feat=details

 #solution { width: 100%; padding: 50px 0; text-align: center; background-color: lightblue; margin-top: 20px; } 

 <details> <!-- can use the open attribute to show it by default --> <summary>try it</summary> <div id="solution"> this is the solution </div> </details> 

it might not look as pretty but it's possible to style it more

Answer 3

Stop the spaces!

function SolutionFunction() {
  var x = document.getElementById("solution");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
#solution {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}
<button onclick="SolutionFunction()">Try it</button>

<div id="solution" style="display: none;">
  This is the solution.
</div>

Better yet, reference the element in your function as an argument. Also look into ternary operators:

   function SolutionFunction(x) {
      x.style.display = x.style.display === "none" ? "block" : "none";
    }
    #solution {
      width: 100%;
      padding: 50px 0;
      text-align: center;
      background-color: lightblue;
      margin-top: 20px;
    }
    <button onclick="SolutionFunction(document.getElementById('solution'))">Try it</button>

    <div id="solution" style="display: none;">
      This is the solution.
    </div>