How to toggle hide and show

Use JavaScript to toggle between hiding and showing elements.

Click the button!

Toggle (hide/show) element

Step 1 - Add HTML:

<button onclick="myFunction()">Click Me</button>
<div id="myDIV">
  This is my DIV element.
</div>

Step 2 - Add JavaScript:

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

Try It Yourself

Related Pages

Tutorial:CSS Display