The way I'd go about it would be to add content
indie inside each menu item. You decide whether or not to show this content based on the class of it's parent. Then, whenever you click the parent element, you simply toggle a class name.
Here's a rough sample. The styles are pretty nasty, but it demonstrates the purpose.
Also, you shouldn't really use inline javascript on the html elements like I did. You should give them a class and then addEventListener for 'click' on any <li> element that has this className. I'll leave that as an exerise for you.
<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}
window.addEventListener('load', mInit, false);
function mInit()
{
}
function toggleClass(element, newStr)
{
index=element.className.indexOf(newStr);
if ( index == -1)
element.className += ' '+newStr;
else
{
if (index != 0)
newStr = ' '+newStr;
element.className = element.className.replace(newStr, '');
}
}
</script>
<style>
li ul
{
display: none;
}
li.open ul
{
display: block;
}
</style>
</head>
<body>
<ul>
<li onclick='toggleClass(this, "open");'>Option 1
<ul>
<li>opt 1a</li>
<li>opt 1b</li>
</ul>
</li>
<li onclick='toggleClass(this, "open");'>Option 2</li>
<li onclick='toggleClass(this, "open");'>Option 3
<ul>
<li>opt 1a</li>
<li>opt 1b</li>
</ul>
</li>
</ul>
</body>
</html>