Page 1 of 1

Javascript / document.getElementById

Posted: Fri Dec 17, 2004 3:30 am
by Toneboy
Finally found a script that switches between "tabs". Got it working on my Archives Index (down at the bottom of the page).

Does anyone know how to make a slight adjustment to it so that it will show the first <div> section automatically when the page loads? I'm guessing that you switch the .style.display = 'none' to something else, but wasn't sure, so I thought I'd ask.

Here's the current code:

Code: Select all

<script language="Javascript" type="text/javascript">
function show_div(div_id) &#123;
// hide all the divs
document.getElementById('div_1').style.display = 'none';
document.getElementById('div_2').style.display = 'none';
document.getElementById('div_3').style.display = 'none';

// show the requested div
document.getElementById(div_id).style.display = 'block';
&#125; 
</script>

<b>Thoughts:</b> <a href="#" class="cursor" onclick="show_div('div_1'); return false;">Latest</a> |
<a href="#" class="cursor" onclick="show_div('div_2'); return false;">Classic</a> |
<a href="#" class="cursor" onclick="show_div('div_3'); return false;">Your Favourites</a>

<div style="display: none;" id="div_1"><a href="showthought.php?d=13&&m=12&&y=2004">13th December 2004</a><br />
Tony Dobson suggests how you can survive a Christmas dip at work.</div>
<div style="display: none;" id="div_2"><a href="showthought.php?d=3&&m=1&&y=2000">3rd January 2000</a><br />
Neil Taylor heralds a new millennium.</div>
<div style="display: none;" id="div_3">Coming soon!</div>
Any help much appreciated.

Posted: Fri Dec 17, 2004 7:15 am
by Chris Corbyn
Make sure all the other div's are set to style="display:none" and then set the first div sto style="display:block"

Code: Select all

<script language="Javascript" type="text/javascript"> 
function show_div(div_id) &#123; 
// hide all the divs 
document.getElementById('div_1').style.display = 'none'; 
document.getElementById('div_2').style.display = 'none'; 
document.getElementById('div_3').style.display = 'none'; 

// show the requested div 
document.getElementById(div_id).style.display = 'block'; 
&#125; 
</script> 

<b>Thoughts:</b> <a href="#" class="cursor" onclick="show_div('div_1'); return false;">Latest</a> | 
<a href="#" class="cursor" onclick="show_div('div_2'); return false;">Classic</a> | 
<a href="#" class="cursor" onclick="show_div('div_3'); return false;">Your Favourites</a> 

<div style="display: block;" id="div_1"><a href="showthought.php?d=13&&m=12&&y=2004">13th December 2004</a><br /> 
Tony Dobson suggests how you can survive a Christmas dip at work.</div> 
<div style="display: none;" id="div_2"><a href="showthought.php?d=3&&m=1&&y=2000">3rd January 2000</a><br /> 
Neil Taylor heralds a new millennium.</div> 
<div style="display: none;" id="div_3">Coming soon!</div>

Posted: Sat Dec 18, 2004 2:32 pm
by Toneboy
Works a treat, thanks. :)