Javascript / document.getElementById

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Toneboy
Forum Contributor
Posts: 102
Joined: Wed Jul 31, 2002 5:59 am
Location: Law, Scotland.
Contact:

Javascript / document.getElementById

Post 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.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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>
User avatar
Toneboy
Forum Contributor
Posts: 102
Joined: Wed Jul 31, 2002 5:59 am
Location: Law, Scotland.
Contact:

Post by Toneboy »

Works a treat, thanks. :)
Post Reply