toggle menu in multiple browsers

I'm trying to get his little toggle menu script to run in multiple browsers without any luck. Can anyone suggest a workaround? It works for me in IE6 but mozilla doesn't like it

Code:

<HTML> <HEAD> <TITLE>toggle foo</TITLE> <SCRIPT TYPE="TEXT/JAVASCRIPT" LANGUAGE=JAVASCRIPT>  </SCRIPT> <STYLE TYPE="TEXT/CSS"> #menu1 {display:none; margin-left:20px} </STYLE> </HEAD> <BODY BGCOLOR=WHITE> <H3> <A HREF="#" onClick="return toggleMenu('menu1')">Toggle Me</A> </H3> <SPAN ID="menu1"> heres my text to display <BR> heres my text to display<BR> heres my text to display<BR> heres my text to display </SPAN> <H3>other stuff<h3> </BODY> </HTML>

The problem is that you're using document.all, which only works in Internet Explorer.

Replace the toggleMenu fuction with this (disclaimer: I've not tested this)

Code:

function toggleMenu(currMenu) {

Code:

if (document.getElementById) { thisMenu = document.getElementById(currMenu).style; } else if (document.all) { thisMenu = document.all[currMenu].style; } else { return true; } if (thisMenu.display == "block") { thisMenu.display = "none" } else { thisMenu.display = "block" } return false; }

That should work in Netscape 6+ and Mozilla. With any luck, it'll work in Opera too, and anything else that supports the W3C DOM.

thanks blufive but it didn't work. I get an error on the page on line 37 right by the <a> tag. "object expected" Any suggestions on getting around that???

(Apologies for the delay, I've been away for the weekend)

I got it working fine here, in Mozilla Firebird and IE6, with this code:

HTML Code:

<HTML> <HEAD> <TITLE>toggle foo</TITLE> <SCRIPT TYPE="TEXT/JAVASCRIPT" LANGUAGE=JAVASCRIPT>  </SCRIPT> <STYLE TYPE="TEXT/CSS"> #menu1 {display:none; margin-left:20px} </STYLE> </HEAD> <BODY BGCOLOR=WHITE> <H3> <A HREF="#" onClick="return toggleMenu('menu1')">Toggle Me</A> </H3> <SPAN ID="menu1"> heres my text to display <BR> heres my text to display<BR> heres my text to display<BR> heres my text to display </SPAN> <H3>other stuff<h3> </BODY> </HTML>

Thanks blufive. Whats up with taking the weekend off huh? ;) just kidding. that's probably what i should start doing...

That's working great. But now what happens if I want to add a second menu?
I just tried doing it this way:

Code:

<HTML> <HEAD> <TITLE>toggle foo</TITLE> <SCRIPT TYPE="TEXT/JAVASCRIPT" LANGUAGE=JAVASCRIPT>  </SCRIPT> <STYLE TYPE="TEXT/CSS"> #menu1 {display:none; margin-left:20px} </STYLE> </HEAD> <BODY BGCOLOR=WHITE> <A HREF="#" onClick="return toggleMenu('menu1')">Toggle Me</A><br> <SPAN ID="menu1"> heres my text to display <BR> heres my text to display<BR> heres my text to display<BR> heres my text to display </SPAN> <A HREF="#" onClick="return toggleMenu('menu2')">Toggle Me2</A><br> <SPAN ID="menu2"> heres my text to display2 <BR> heres my text to display2<BR> heres my text to display2<BR> heres my text to displa2y </SPAN> <H3>other stuff<h3> </BODY> </HTML>

What's happening is that the second menu is expanded by default and not collapsed like "menu1" when the page is initially loaded.

Quote:

Originally Posted by bingymon

What's happening is that the second menu is expanded by default and not collapsed like "menu1" when the page is initially loaded.

Probably because you don't have this line in your css ;)
#menu2 {display:none; margin-left:20px}

Doh! It's usually somthing small that gets ya. Thanks!