Display/Hide options using <div> tags and radiobuttons

[caclratm]

Hi,

I'm an absolute javascript newbie trying to hide/show certain parts of html code on a jsp by means of a javascript function because that's what I guess I need. So far here's what I got :

function showDiv(pass) {
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){
divs[i].style.visibility="visible";
} else {
divs[i].style.visibility="hidden";
}
}
}

I saw a code very much resembling this one on this site, but I can't quite get it to work. What I want is to be able to dynamically change certain text of a fill-in form depending on wich radiobutton is selected at a given moment.

[stuartc1]

General note...

Using:
document.getElementById('id').style.visibility = 'hidden';
will hide the element, but keep the space which the element occupies.

But Using:
document.getElementById('id').style.display= 'none';
Will hide the element and the space it may consume (other content can use it).... I usually always use this method.

An absolute basic set of functions to show and hide elements....

function showDiv(id) {
document.getElementById(id).style.display = '';
}

function hideDiv(id) {
document.getElementById(id).style.display = 'none';
}

[caclratm]

What I want is a function that receives a div's id as parameter and shows that one with

divs[i].style.display="block";

and hides all the other divs with

divs[i].style.display="none";

So far, I got this:

function showDiv(pass) {
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){
divs[i].style.display="block";
} else {
divs[i].style.display="none";
}
}
}

That little piece of code does show the ones that aren't displayed in the beginning with

<div id="myId" style="display: none">

I can change those to "block", but I can't do it the other way around (change "block" to "none")