how to hide div for page load and then use a show/hide function as normal

Question

Im trying to use the hide/show function to show an image when "<div" is clicked on. When I load onto the page for the first time, the image has already loaded onto the screen. I would like the image to be hidden on page load, allowing the image to then be revealed when the is clicked.

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

 #img01 { width: 800px; padding-left: 30px; display: none; }

 <div onclick="active01()" id="line01"> Exhibition_Design_The_Telephone_book_001....................2009-001</div><br> <img id="img01" src="images/01 Exhibition design.jpg" alt="Exhibition_Design_The_Telephone_book_001....................2009-001"><br>

Answer 1

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

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

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

Check this example