Displaying just portions of a list

I have an unordered list of content with unique ID for each item. I also have a menu of buttons that should display a given list item. I want to hide all items in the list at first, but then use the buttons to display their appropriate list item. If a given item in the list is already displayed when another button is pressed, the currently shown item should disappear and be replaced with the new one. My HTML is as follows:

[code=html]<ul id=”my_list” >
<li id=”item1″>stuff</li>
<li id=”item1″>stuff</li>
<li id=”item1″>stuff</li>
</ul>

<ul id=”menu”>
<li><input type=”button” value=”Item 1″ onclick=”showItem(‘item1’);” /></li>
<li><input type=”button” value=”Item 2″ onclick=”showItem(‘item2’);” /></li>
<li><input type=”button” value=”Item 3″ onclick=”showItem(‘item3’);” /></li>
</ul>[/code]

To originally hide all items, I am under the impression that I can not just target the ul tag, but must target the individuals li tags since display is not inherited. Does this sound correct?

[CODE]#my_list li {display: none;}[/CODE]

To hide any previous item, and show the new item, I was thinking of the following:

[CODE]function showItem(currMenu) {
if (document.getElementById) {
thisMenu = document.getElementById(currMenu);
thisMenu.parentNode.style.display = “none”;
thisMenu.style.display = “block”;
return false;
}
else {
return true;
}
}[/CODE]

The list items are initially hidden, but unfortunately, the javascript does not make the selected item appear. Any suggestions what I am doing wrong?

Thanks

Also in #JavaScript _↴