display div's with radiobuttons

[ayok]

Hi.

I have 10 radiobuttons with a div under it.

<input type='radio' name='test' value='first_value' />Radio1<br/><div id="first_div">test</div>

This is what I'm trying to achieve: All div's are hidden (display:none) and if I check a radiobutton it show the div under it (display:block) and if I check other radiobutton, it will closed and open the div under the other radiobutton.

 

My attempt:

<script>
function radiobuttons(disp)
{
    for(i = 0; i < document.form1.test.length; i++){
        if(document.form1.test[i].checked){
            document.getElementById(disp).style.display = 'block';
        }else{
            document.getElementById(disp).style.display = 'none';
        }
    }

}
</script>

<input type='radio' name='test' onclick="radiobuttons(first_div)" />Radio 1<br/><div id="first_div">test</div>
<input type='radio' name='test' onclick="radiobuttons(second_div)" />Radio 2<br/><div id="second_div">test2</div>
<input type='radio' name='test' onclick="radiobuttons(third_div)" />Radio 3<br/><div id="third_div">test3</div>

I've tried this code, but it doesnt work. It's displayed in the loop but then hide again immediately. I've tried to insert break; but it doesn't work right either.

 

How can I get it right? Any help?

 

Thank you in advanced.

ayok