i have a menu, which works fine. there is one addition that i'd like to it - the '+' symbol on an expanding menu item to turn to a '-' symbol, when expanded.

here's what i have so far...

window.onload=expand;
function expand(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('menu'+i)) {document.getElementById('menu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}


<div id="menu">
<ul>
<li class="welcome">Hello, <a href="#">User Name</a></li>
<li onclick="javascript:expand();"><a href="#" class="home_link">Home Page</a></li>
<li onclick="javascript:expand();"><a href="#" class="messages_link">Messages</a></li>
<li onclick="javascript:expand('menu2');"><a href="#" class="users_link">Users <span class="expand">+</span></a>
<ul id="menu2">
<li><a href="#" class="usersedit_link">Add / Edit / Delete</a></li>
<li><a href="#" class="userslogins_link">Logins</a></li>
</ul>
</li>

...
</div>

atm, that span with the '+' in it gets a background image, and the text indented off the page. really, all that needs doing would be the background image changing, i'm not bothered about changing the actual text (the span may just be placed around the link text for items with submenus, anyway).

thanks in advance!

nope, that is my entire js file right there, i'd prefer to not load an entire library just for a simple menu

this is it, in situ -

really, i guess i can get away with just changing the span class, rather than replacing any text.

so, from <span class="expand"> to <span class="collapse">

try this
window.onload=MenuClicks;

function MenuClicks() {
var mLis = document.getElementById('menulist').getElementsByTagName('li');

for (var n = 0; n < mLis.length; n++) {
if (mLis[n].getElementsByTagName('ul').length > 0) {
mLis[n].getElementsByTagName('ul')[0].style.display ='none';
}

mLis[n].onclick = function() {
var cLis = document.getElementById('menulist').getElementsByTagName('li');
var cSpan = this.getElementsByTagName('span')[0];
var cUl = this.getElementsByTagName('ul')[0];
var cId = (cUl) ? cUl.id : '';
var cStyle = (cUl) ? cUl.style.display : 'none';

for (var n = 0; n < cLis.length; n++) {
if(typeof(cLis[n].getElementsByTagName('ul')[0]) != "undefined" ) {
if(cLis[n].getElementsByTagName('ul')[0].id != cId || cStyle == 'block') {
cLis[n].getElementsByTagName('ul')[0].style.display = 'none';
cLis[n].getElementsByTagName('span')[0].className = 'expand';
} else if (cStyle == 'none') {
cLis[n].getElementsByTagName('ul')[0].style.display = 'block';
cLis[n].getElementsByTagName('span')[0].className = 'collapsed';
}
}
}
}
}
}
it adds the javascript onclicks at page load and thus skinny's down your html. it also means your menu can now use "id"s that mean something rather than "menu1" and "menu2" etc.
i have added in a feature that you can now collapse a sub menu by reclicking it's parent. a small feature that adds only one conditional and 3 extra lines of code.
skinnied down html is now<div id="menu">
<p class="welcome">Hello, <a href="#">Dave</a></p>
<ul id="menulist">
…
<li><a href="#" class="users_link">Users <span class="expand">+</span></a>
<ul id="users">
<li><a href="#" class="usersedit_link">Add / Edit / Delete</a></li>
<li><a href="#" class="userslogins_link">Logins</a></li>
</ul>
</li>
…
</ul>
</div>


thanks urban, yer a fucking star, innit!