Problem with a expandable menu

Hi there,

I'm using the following code:

function toggleMenu() {
	var oMenu = document.getElementById("item");
	if(oMenu.style.display == "none")
		oMenu.style.display = "block";
	else
		oMenu.style.display = "none";
}

Code (markup):

<ul>
	<li onclick="toggleMenu();">Menu</li>
	<li id="item" style="display:none;">
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
	</li>
</ul>

Code (markup):

When I click on it, it toggles down, all cool. Everything works fine, except for one little thing. When the page is loaded, it automatically toggles/opens the menu without me clicking on it, and I need it closed.

How can I fix that?

Thanks.

 

Very odd. I'd have to see the whole page to be sure, but I wonder whether some code is running in your body onload event that's causing this. If so, make it stop. If not, you might have to trace the code to see where it's calling your toggle function. The Firefox add-on Firebug has a good tracer/debugger for Javascript.

I hope this helps.

Steve

 

I agree with SolarCat, it seems the function gets called on page load.

In that case you find why and where and stop it or you remove style="display:none;", because if the function really gets called on page load it will hide your menu in that case

 

I worked this out, the style="display: none" was the problem, somehow I erased it and didn't notice. Now I've got another issue...

It's the same menu and everything. I'm using the following code:

<ul>
	<li onclick="toggleMenu();">[B]<a href="#">Menu</a>[/B]</li>
	<li id="item" style="display:none;">
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
	</li>
</ul>

Code (markup):

The problem is the #. When I scroll down the page and click on that, it throws the page at the top (it scrolles it back to the top). So if the menu is somewhere in the bottom, you have to click, the browser throws you to the top and then you have to scroll down to see what you opened. It's driving me crazy. Can anyone help?

Thanks.

 

Add

onclick="return false;"

Code (markup):

to the link to prevent it from activating.

 

Thank you, James. That did it!

 

As a followup, you can do this with just about anything that triggers an action. For instance, if you want to validate the data in a form, you can use 'return false' on the submit button if the validation fails.