Yumin Hwang Yumin Hwang - 9 days ago 6
CSS Question

HTML Display images on click

I have an HTML page with an image(wanna use as a button) and some several images that I set to be invisible by CSS visibility: hidden. I want to make when i click this 'image 'w-click.png'' another several image appear.

so, tag to some other images. In my case, I want the click 'w-click.png' to invoke a JavaScript to display the images.

i found one click one image appearing, but i want one click several images appearing....

edit : this is my code

<img src="IMAGE/w-click.png" style="z-index:200; margin-left:6680px; position:relative; width:700px; margin-top:-100px; padding:0; position:absolute; " />

<div class="invisible-livingroom">
<img src="IMAGE/w-clock.png" style="position:absolute; margin-left:1200px; filter:brightness(1.3);visibility:hidden; " />
<img src="IMAGE/w-stand.png" style="position:absolute; margin-left:1830px; margin-top:120px;filter:brightness(1.2); height:800px; z-index:5; visibility:hidden;"/>
<img src="IMAGE/w-cushion.png" style="position:absolute; margin-left:1450px; margin-top:270px; transform:rotate(2deg); visibility:hidden;"/>
<img src="IMAGE/w-light.png" style="position:absolute; margin-left:1310px; width:900px; margin-top:-130px; filter:brightness(0.95); visibility:hidden;" />
<img src="IMAGE/w-livingroom-table.png" style="position:absolute; margin-left:1310px; width:900px; margin-top:240px; filter:brightness(1.6); visibility:hidden;"/>
<img src="IMAGE/w-frame2.png" style="position:absolute; width:300px; margin-left:1500px; margin-top:120px; visibility:hidden;"/>
</div>


edit: i added this javascript code and add id="myImageId' to every images but it makes only one image appears

function showImage() {
var img = document.getElementById('myImageId');
img.style.visibility = 'visible';
}

Answer
var imagesRoot = document.getElementsByClassName("invisible-livingroom");
var images = imagesRoot[0].getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
    images[i].style.visibility = "visible";
}

in jQuery it is as simple as

$(".invisible-livingroom img").css("visibility", "hidden")