Help - Search - Members - Calendar
Full Version: Unhide And Hide Javascript Issue
Zymic Webmaster Forums > Web Design & Development > Client Side Scripting > JavaScript
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 smile.gif
EvilMastermindsProgram
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...
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2012 Invision Power Services, Inc.