Displaying Selected Div, Toggling, and Disabled Javascript

Toggling Div Display, With Selected Div Displaying on page-load

[JJRose]

Hello,

I was searching for a div-toggling script that will:
1) display one div automatically on page-load whilst hiding all the other divs,
2) clicking on each link will display other divs in the same place as the already-loaded div.
3) When javascript is turned off, ALL divs will display in the browser.

In the thread at [webmasterworld.com...] (at the bottom of that page) I found some code that works perfectly for points 1 and 2, but not for 3. I only get the initial div displaying when javascript is turned off.

I was wondering if anyone could help with amending the javascript code (shown below) to somehow make all divs display on the page when javascript is turned off. Or perheps point me to another script that would enable all three points?

Thanks in advance. This is the code being used:

** the js code **
<script language=javascript type='text/javascript'>
/* Initial id in global var */
var currId = 'div_1';
//
function show_div(div_id) {
if(currId)
document.getElementById(currId).style.display = 'none';
document.getElementById(currId).style.display = 'block';
currId = div_id;
}
</script>

** the divs **
<div style="visibility: visible" id="div_1">
content 1
</div>
<div style="display: none;" id="div_2">
content 2
</div>

** the links **
<a href="" onclick="show_div('div_1'); return false;">link 1 description</a>
<a href="" onclick="show_div('div_2'); return false;">link 2 description</a>

[daveVk]

Try

** the js code **
<script language=javascript type='text/javascript'>
/* Initial id in global var */
var currId = 'div_1';
//
function show_div(div_id) {
if(currId) { document.getElementById(currId).style.display = 'none'; }
currId = div_id;
document.getElementById(currId).style.display = 'block';
}
function initPage() {
var n=2;
var divEl;
while ( ( divEl = document.getElementById( "div_" + n )) !== null ) { divEl.style.display = 'none'; n++;}
}
window.onload = initPage;
</script>

** the divs **
<div id="div_1">
content 1
</div>
<div id="div_2">
content 2
</div>

** the links **
<a href="" onclick="show_div('div_1'); return false;">link 1 description</a>
<a href="" onclick="show_div('div_2'); return false;">link 2 description</a>