Hide all elements from one class and show one specified element with JavaScript

Question

I am new to JavaScript and also new to this website.

I have this JavaScript that changes the visibility of an element to "visible".

function show(parameter) {
    document.getElementById(parameter).style.visibility = "visible";
}

That one works just fine but I also want the same function to first hide all elements from the class "foo" and then show the specified elements.

This is what I tried

function show(parameter) {
    document.getElementsByClassName("foo").style.visibility = "hidden";
    document.getElementById(parameter).style.visibility = "visible";
}

It doesn't work.

Please Help

P.S. I prefer not to use jQuery.

Answer 1

Try

var elems = document.getElementsByClassName('foo');
for(var i = 0; i < elems.length; i++) {
    elems[i].style.visibility = 'hidden';
}