Javascript Simple Gallery (No JQuery)

Question

I am having trouble understanding why this gallery wont work. I would like the ability to click on thumbnails to bring up a new enlarged photo but hide the previous one.

I have created a fiddle here jsfiddle.net/gt2d1jna.

For some reason, on my local machine the first thumbnail works but none of the others do.

I know this can be easily accomplished through jQuery but I am looking for a vanilla solution.

Answer 1

Does the below code in JSFiddle help

http://jsfiddle.net/p7xLj0y6/2/

        var showbig = function(elmnt) {

        var bigimages = document.getElementById("bigImages");
        var images = bigimages.getElementsByClassName("image");

        var gallery = document.getElementById("gallery");
        var children = gallery.getElementsByTagName("div");
        var count = children.length;

        for(var i=0; i<count; i++) {

            if(children[i] == elmnt) {
                images[i].style.display = "block";
            } else {
                images[i].style.display = "none";
            }

        }

    }