I am looking for some good expanding & collapsing menu script.

I have been recommended this

http://www.howtocreate.co.uk/tutoria...seExample.html

The only problem is the guy that wrote it doesn't really expect non developers to mess about with the code & although I now have it working as per his examples the one thing his examples don't allow for are links in the menu that have no sub links or child nodes as he calls them

So perhaps there are some smart javascript developers out there who can tell me how to work the script so that I can have simple straight links or

Maybe someone has some other code they can recommend either of their own or another free resource

Thanks

My example is here

http://www.bitsmail.co.uk/cloudsend/...st-basic3.html

Thanks

I am still completely stuck

Here is some basic HTML

<ul id="odo2">
<li>Book 1
<ul>
<li><a href="list-basic3.html">Chapter 1</a></li>
<li><a href="list-basic3.html">Chapter 2</a></li>
<li><a href="list-basic3.html">Chapter 3</a></li>
<li><a href="list-basic4.html">Chapter 4</a></li>
</ul>
</li>
<li class="two">Book 2
<ul>
<li><a href="list-basic3.html">Chapter 1</a></li>
<li><a href="list-basic3.html">Chapter 2</a></li>
<li>Chapter 3
<ul>
<li><a href="list-basic3.html">Ex 1</a></li>
<li><a href="list-basic3.html">Ex 2</a></li>
</ul>
</li>
<li><a href="list-basic3.html">Chapter 4</a></li>
</ul>
</li>
<li>Book 3
<ul>
<li><a href="list-basic4.html">Chapter 1</a></li>
<li><a href="list-basic4.html">Chapter 2</a></li>
<li><a href="list-basic4.html">Chapter 3</a></li>
<li><a href="list-basic4.html">Chapter 4</a></li>
</ul>
</li>
<li><a href="list-basic4.html" class="SomeId2">Book 4</a></li>
<li><a href="list-basic4.html" class="SomeId2">Book 5</a> </li>
</ul>

I want it to expand & collapse when the user clicks on sub menu's they stay open to allow user to browse the sub menu but then collapse when user clicks somewhere else even on a menu option which has no submenu.

Anyone who has done this PLEASE PLEASE can you help me !!!!!!

If I need to paste the whole script here I can - BUT I REALLY REALLY NEED HELP !!!!

www . creeme.inyoursite.co.uk/ work in progress on a test site so I don't want to link to it.

/ drop down menu functions
var currentNav = null;

function openNav(obj) {
if (obj == null) {
//	obj = currentNav;
}
	if (obj.className.match("closed") != null) {
		closeAll();
		obj.className = obj.className.replace("closed","open");
	} else {
		closeNav(obj);
	}

	if (currentNav != null) {
		closeNav(currentNav);
	}
//	currentNav = obj;
}

function closeNav(obj) {
		obj.className = obj.className.replace("open","closed");
	obj = null;
}

function closeAll() {
var children = document.getElementsByTagName("DL");
	for (var i = 0;i < children.length; i++) {
		children[i].className = children[i].className.replace("open","closed");
	}
}

function setClose() {
//	window.setTimeout("closeNav()",1500);
}

Applied to a definition list but the principle is the same.

<dl id="artcat_1" class="open" onclick="openNav(this)">
<dt>Tribute Acts</dt>

<dd><a href="/artists/the-beatles/">Beatles</a></dd>

<dd>Abba</dd>

<dd id="close_mnu">Close</dd>
</dl>
<dl id="artcat_2" class="open" onclick="openNav(this)">
<dt>Musicians</dt>

<dd><a href="/artists/groups/">Group Acts</a></dd>

<dd>Solo Artists</dd>
<dd id="close_mnu">Close</dd>
</dl>
<dl id="artcat_3" class="open" onclick="openNav(this)">
<dt>Clubland &amp; Cabaret</dt>

<dd><a href="/artists/comedians/">Comedians</a></dd>
<dd id="close_mnu">Close</dd>
</dl>
<dl id="artcat_4" class="open" onclick="openNav(this)">
<dt>After  Dinner Speakers</dt>
<dd id="close_mnu">Close</dd>
</dl>

the close_mnu is not essential.

OK so to get your script to work I put it in script tags in head area of page & it applies to a definition list ?

which is type of ordered list ??

it kind of looks like an xml type list do I need a css sheet to go with it ??

sorry to act like a dumb arse - assume I know nothing & go from there - its been a long long time since I coded any javascript - about 8 years

Thanks BTW !!!!

WOW just seen it working on your site & its exactly what I was looking for

Now I just need to get it working for me LOL

this line var children = document.getElementsByTagName("DL"); change the DL to UL so it looks for an unordered list as the parent element

and I forgot to post the CSS because it uses a classname change to flip between open and closed.

#navigation dl.closed dd {
	display:none;
	visibility:hidden;
}
#navigation dl.open dd {
	display:block;
	visibility:visible;
}

recode the CSS to be a li inside a ul.classname

Its great script & I have worked out how to ammend it to my lists the only thing it does not do is remember the sub menu & so when you click on abba or the beatles I really want that submenu to stay open until you click a different choice like musicians

Thanks for the post re lists - thats much appreciated & easier than me changing my list to a DL type lists

Can you get it to remember state - I am guessing thats what some scripts use a cookie for - so that in the sub menu it knows you are there

I am dead close to simply cheating & having different script on each page to make it achieve same effect just not coded LOL

I actually use server side code to write a js script to set the appropriate category to open.

But a cookie would work just as well.

BTW always start with the menus OPEN, then hide them with js ( call closeAll() after the </body> tag) to make sure that visual non-js user agents can see the menu.