Unhide And Hide Javascript Issue, Javascript hide and unhide

[MLPZ]

Well ok , im making a site and im using an unhide and hide script. iT utilizes javascript. It works very nicely, but ive come to an issue. The issue is that when loading a page the text that is suppose to be hidding isnt hiding, and it only hides once you click on the link. I would really like to load the page up and have the text be hidden at first and when clicked on unhide it. If that makes any sense. I would appreciate any help u guys can give..

HTML

Heres the Javascript portion

<script type="text/javascript"><!--
/* MLPZDESIGNS.CO.CC
*/
function toc_toggle(obname)
{
ob = document.getElementById(obname);
if (ob.style.display == '')
ob.style.display='none';
else
ob.style.display='';
}

function toc_parent(obsearch, ob)
{
var obp = obsearch;
while (obp != null && obp != ob)
{
obp = obp.parentNode;
}

return obp == ob;
}

function toc_switch(obnameto, obnamefrom)
{
var obto = document.getElementById(obnameto);
var obfrom = document.getElementById(obnamefrom);

var obtry = obfrom;

// Find commn parent
while (!toc_parent(obto, obtry))
{
obtry = obtry.parentNode;
}
var obcommon = obtry;

// Show the DIV/SPAN we switch to
// (up to the common parent)
obtry = obto;
while (obtry != obcommon)
{
if (obtry.nodeName == 'DIV' ||
obtry.nodeName == 'SPAN')
{
obtry.style.display = '';
}

obtry = obtry.parentNode;
}

// Hide the DIV/SPAN we switch from
// (up to the common parent)
obtry = obfrom;
while (obtry != obcommon)
{
if (obtry.nodeName == 'DIV' ||
obtry.nodeName == 'SPAN')
{
obtry.style.display = 'none';
}

obtry = obtry.parentNode;
}
}
//--></script>

Heres the second portion


<p>
<br>
<div id="d_dp1">

<a name="a_dpr"
href="java script:toc_toggle('d_dpr')">About us</a>
<br>
<div id="d_dpr">

Hello
</div>

<a name="a_dc1"
href="java script:toc_toggle('d_dc1')">Contact Us</a>
<br>
<div id="d_dc1">

Hey
</div>

</div></p>

[Pixeltor]

CODE

function toc_toggle(obname)
{
   ob = document.getElementById(obname);
   if (ob.style.display == 'block')
   {
      ob.style.display='none';
   }
   else
   {
      ob.style.display='block';
   }
}

then in the html:

CODE

<div id="d_dpr" style="display: none;">

that should work

[EvilMastermindsP...]

You know what would be REALLY easy?
Use jQuery!
(learn jQuery at this link to w3schools if you don't know it...)
It can make cool effects too.
See an example on my website (here) by clicking on the "News & extras" link...