I have multiple div elements with the class name dis
HTML:
<div class="dis">Content</div>
<div class="dis">Content</div>
<div class="dis">Content</div> and so on ...
Additionally, there are various images:
<img src="icons/image1.png" class="admoicn" onclick="toggle_visibility('dis');" >
<img src="icons/image2.png" class="admoicn" onclick="toggle_visibility('dis');" >
<img src="icons/image3.png" class="admoicn" onclick="toggle_visibility('dis');" >
CSS:
.dis{
display:none;
width:100px;
height:100px;
}
Javascript:
function toggle_visibility(id) {
var e = document.getElementsByClassName(id)[0];
if(e.style.display =="block"){
e.style.display ="none";
}
else{
e.style.display ="block";
}
}
Upon clicking any image, the corresponding div with class dis should open. For example, clicking on the third image3.png should reveal the third dis div while closing all others that may be open.
I suspect there may be an issue with arrays in the Javascript class causing this functionality problem, but being new to Javascript, I am unsure how to resolve it.