Javascript DOM CSS Style display Property show and hide elements

Introduction

Toggle between hiding and showing an element:

Click the button to toggle between hiding and showing the DIV element:

The element will not take up any space when the display property set to "none".

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {// w ww. j  a va2 s .c  o m
  width: 500px;
  height: 500px;
  background-color: lightblue;
}
</style>
</head>
<body>

<button onclick="myFunction()">Test</button>

<div id="myDIV">
This is my DIV element.
</div>


<script>
function myFunction() {
  var x = document.getElementById('myDIV');
  if (x.style.display === 'none') {
    x.style.display = 'block';
  } else {
    x.style.display = 'none';
  }
}
</script>

</body>
</html>



PreviousNext

Related