make one element visible and 49 others invisible
<p>I am absolutely new to javascript, so please bear with me.</p>

<p>I have 50 elements on my page with ids. All are set to visibility:hidden and position:fixed. I have a button that corresponds to each element. When a button is clicked, a javascript function is initiated which makes the corresponding element visibile and position:relative. Code looks something like this:</p>

<pre><code>document.getElementById("id1").style.position='relative';
document.getElementById("id1").style.visibility='visible';
</code></pre>

<p>To ensure that only one element is ever visible and relative, I also need to make the other 49 elements hidden and fixed. How can I accomplish this without having to resort to the following sort of code:</p>

<pre><code>function makeid1visibile()
{
    document.getElementById("id1").style.position='relative';
    document.getElementById("id1").style.visibility='visible';

    document.getElementById("id2").style.position='fixed';
    document.getElementById("id2").style.visibility='hidden';
    document.getElementById("id3").style.position='fixed';
    document.getElementById("id3").style.visibility='hidden';
    document.getElementById("id4").style.position='fixed';
    document.getElementById("id4").style.visibility='hidden';
    // etc...
}
</code></pre>

<p>Any help would be appreciated, because with 50 elements, the number of lines of coding would be outrageous.</p>
