Firefox doesn't like collapsible menu JavaScript

[mike]

The JavaScript below works fine for expandable/collapsible menus in IE,
but Firefox 1.5 complains: "Error: loc.parentNode.nextSibling has no
properties" and highlights the line
foc=loc.parentNode.nextSibling.style?.

Is there a fix to make Firefox happy?

thanks,
Mike

<script type="text/javascript"><!--
function dsp(loc){
if(document.getElementById){
var foc=loc.firstChild;
foc=loc.firstChild.innerHTML?
loc.firstChild:
loc.firstChild.nextSibling;
foc.innerHTML=foc.innerHTML=='+'?'-':'+';
foc=loc.parentNode.nextSibling.style?
loc.parentNode.nextSibling:
loc.parentNode.nextSibling.nextSibling;
foc.style.display=foc.style.display=='block'?'none':'block';}}

if(!document.getElementById)
document.write('<style type="text/css"><!--\n'+
'.dspcont{display:block;}\n'+
'//--></style>');
//--></script>

body HTML looks like this:

<h3><a href="javascript:void(0)" class="dsphead"
onclick="dsp(this)">
<span class="dspchar">+</span>Search</a></h3>
<div class="dspcont">
<ul>
<li><A HREF="http://www.google.com/">Google</A>
<li><A HREF="http://www.yahoo.com/">Yahoo</A>
<li><A HREF="http://www.teoma.com/index.asp">Teoma</A>
</div>
</h3>

 

[RobG]

The JavaScript below works fine for expandable/collapsible menus in IE,
but Firefox 1.5 complains: "Error: loc.parentNode.nextSibling has no
properties" and highlights the line
foc=loc.parentNode.nextSibling.style?.

Is there a fix to make Firefox happy?
Yes.



thanks,
Mike

<script type="text/javascript"><!--
function dsp(loc){
if(document.getElementById){
var foc=loc.firstChild;
foc=loc.firstChild.innerHTML?
loc.firstChild:
loc.firstChild.nextSibling;

I suspect that this is a device to get the SPAN element if there is a
text node placed directly after the div that loc refers to. A better
method might be to progress through the child nodes until the SPAN is
encountered (there may be 0, 1 or more text nodes there).

foc.innerHTML=foc.innerHTML=='+'?'-':'+';
foc=loc.parentNode.nextSibling.style?

Here foc refers to the SPAN. It's parent is the div, whose
nextSibling is the empty text node placed after the closing div tag in
Firefox but not by IE - it's the same situation that you are trying to
avoid above (the empty text nodes are there because of the new lines
in the markup).

You might be better to write a function that returns the next sibling
of a certain tag name, then use it for both situations to ensure you
get the right node. Something like:


function getSibOfTag(el, tag)
{
var k = el.childNodes;
var x;
for (var i=0, len=k.length; i<k; ++i){
x = el.childNodes;
if ( x.tagName && tag == x.tagName.toLowerCase()){
return x;
}
}
return null;
}


then call it with:

var foc = getSibOfTag(loc, 'span');


and

foc = getSibOfTag(loc.parentNode, 'h3');


Untested, but hopefully you get the idea.


[...]