JavaScript Forum

**firemail** · 05-09-2008, 11:57 PM

Hi,
I've searched and searched, and tested more than once.
I'm trying to get the following javascript to work in firefox.(works great in IE)
If I fix it replacing w/ display/block instead of visibility/hidden it works in firefox but not in ie....

<script language="JavaScript">
function toggleVisibility(me){
if (me.style.visibility=="visible"){
me.style.visibility="hidden";
}
else {
me.style.visibility="visible";
}
}
</script>

Markup :
<a onclick="toggleVisibility(mydiv)">Click to make visible</a>
<div id="mydiv" name="mydiv">Show this DIV</div>

**zxcvbnm60** · 02:19 AM

Trying this in both IE7 and Firefox has the same behavior for me: first click has no effect the second and subsequent clicks work. This is because when the function is called the first time, the div's visibility attribute is undefined though the browsers default to making it visible. That makes the if statement fall through to the else branch, where the div then gets assigned an explicit style of "visibility: visible;" which of course has no effect.

You can account for this by switching the if statement to test for "hidden" first.

HTML Code:

<html>
<head>
 <title>nothing</title>
 <script language="JavaScript" type="text/javascript">
 <!--
function toggleVisibility(me){
  if (me.style.visibility=="hidden"){
     me.style.visibility="visible";
  }
  else {
     me.style.visibility="hidden";
  }
}
// -->
 </script>
</head>
<body>
 <a onclick="toggleVisibility(mydiv)">Click to make visible</a>
 <div id="mydiv" name="mydiv">Show this DIV</div>
</body>
</html>

**firemail** · 05-10-2008, 11:03 AM

Ok, this script works fine in IE(all). It doesn't work on Firefox.
The inherit value of the div I'm try to make "visible" is "hidden".

You can see it in developpment @ http://firemail.ca/phpsearch/
it's the "login link" @ top right.

It works just great w/ IE and other browsers, but not Firefox.

Could I replace the javascipt w/ a PHP function, the site is built up in PHP.

Why am I having the same problems w/ Firefox, that I had w/ Netscape ten years ago?

**zxcvbnm60** · 05-10-2008, 01:48 PM

Ah, I knew there was a reason I've never trusted passing around elements by name as parameters.

There's no shame in using getElementById and passing the id of the div you want to toggle.

Minor changes:

Put 'mydiv' in single quotes in the onclick handler.

Code:

<a href="#" onClick="toggleVisibility('mydiv');">

Change the function declaration line and set me to be the element returned by getElementById:

Code:

    function toggleVisibility(sId){
                me=document.getElementById(sId);

That should work for most browsers.

**firemail** · 06:04 PM

Great,
I've tried dozens of variations all failed, thanks.

-----Disregard following lines -----
New problem though,
first click does nothing! Second click only, tried reversing hidden w/ visibile and VS, not working..
---------------------------------
IT WORKS GREAT!
Alex

**zxcvbnm60** · 03:04 AM

So does it work or not? Final code:

Code:

 
<html>
<head>
 <title>nothing</title>
 <script language="JavaScript" type="text/javascript">
 <!--
function toggleVisibility(sId){
  var me=document.getElementById(sId);
  if (me.style.visibility=="hidden"){
     me.style.visibility="visible";
  }
  else {
     me.style.visibility="hidden";
  }
}
// -->
 </script>
</head>
<body>
 <a onclick="toggleVisibility('mydiv')">Click to make visible</a>
 <div id="mydiv" name="mydiv">Show this DIV</div>
</body>
</html>

**firemail** · 05-11-2008, 09:36 PM

No no it works great!

I had inverted the values, it's ok now.

Thanks