Toggle Visibility of Elements 1

[brigmar]

I've not done javascript in 8 years so bear with me.

I'm doing an FAQ page where I toggle the visibility of answers when the user clicks on the questions.

I currently use:

function togvis(id) { 
  var e = document.getElementById(id);
  if(e.style.display == 'block') 
    e.style.display = 'none';
  else
    e.style.display = 'block';
  return false;
}

in conjunction with the following HTML:

<ol>
<li>
<a href="#" onclick="return togvis('faq1');">FAQ Question 1?</a>
<div class="faq" id="faq1" >FAQ Answer1</div>
</li>
</ol>

What I would like to do is modify togvis() so that I don't need to generate/pass an explicit id. I'd like the call to be "togvis(this)" and have togvis() pick the following element in the DOM (actually the last sibling) and toggle that element's visibility.

With that in mind, I tried:

function togvis2( e1 ) { 
  var e = e1.parentNode.lastChild;
  if(e.style.display == 'block') 
    e.style.display = 'none';
  else
    e.style.display = 'block';
  return false;
}

and

<li>
<a href="#" onclick="return togvis2(this);">FAQ Question 1?</a>
<div class="faq">FAQ Answer1</div>
</li>

This doesn't work.
When I throw in some debug alert() calls:
e.nodeType is 1
e.nodeName is DIV
e.nodeValue is null

The first two I expect. The third should be the content "FAQ Answer1", no ?

What am I doing wrong?
How do I achieve what I was looking for?

 

[BabyJeffy]

You are gonna hate this... [!]e[/!] is a reserved word in IE. Try changing your variable name *grin*

Regards nodeValue - the nodeType needs to be a text node for this to ba anything but null.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[tsuji]

The problem is not e being thought of as reserved word in IE, besides, it is _not_ reserved. The problem is to find the lastChild being an element node which poses minor problem on default setting of treating whitespaces.
[tt]
function togvis2( e1 ) {
//var e = e1.parentNode.lastChild; //this is defective cross-browser
var e=null;
var ec=e1.parentNode.childNodes;
for (var i=ec.length-1;i>-1;i--) {
if (ec.nodeType==1) {
e=ec;
break;
}
}
var ec=null;
if (e!=null) {
if(e.style.display == 'block' [blue]|| e.style.display == ''[/blue])
e.style.display = 'none';
else
e.style.display = 'block';
}
return false;
}
[/tt]

 

[brigmar]

Thanks for the help.
I used a modified version of your code, tsuji.
The code provided required me to click twice on a link before it became visible, so I altered that snippet to:

  if (e!=null) {
    e.style.display = (e.style.display != 'block') ? 'block' : 'none';
  }