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>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