title: Manipulate the Style Display property
body: <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
     &lt;head&gt;
        &lt;style&gt; 
           #myDIV {
           width: 500px;
           height: 500px;
           background-color: lightblue;
           }
        &lt;/style&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;p&gt;Click the "Try it" button to set the display property of the DIV element to "none":&lt;/p&gt;
        &lt;button onclick="myFunction()"&gt;Try it&lt;/button&gt;
        &lt;div id="myDIV"&gt;
           This is my DIV element.
        &lt;/div&gt;
        &lt;p&gt;&lt;b&gt;Note:&lt;/b&gt; The element will not take up any space when the display property set to "none".&lt;/p&gt;
        &lt;script&gt;
           function myFunction() {
               document.getElementById("myDIV").style.display = "none";
           }
        &lt;/script&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm working with style display property. How can i manipulate the code, so that at the beginning the DIV element is hidden and when i click the button it appears?</p>