Webmaster Forum / HTML, CSS, Scripts / CSS / June 2007

I have a css+javascript question.

I have this script:

function showIT() {
    for (i=0;i<document.getElementsByTagName("li").length; i++) {
        if (document.getElementsByTagName("li").item(i).className == "it"){
            document.getElementsByTagName("li").item(i).style.display = "list-
item";
        }
    }
}

this style:

.it        {
        display:            none;
        }

and this html:

<ul>
<li class="it ibo"><h2>header1</h2>
<ul>
    <li>item1</li>
    <li>item2</li>
</ul></li>

<li class="it"><h2>header2</h2>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul></li>
</ul>

Somewhere else I have a link:
<a href="#" onClick="showIT()">for IT</a>

This works for elements with one class, but not for elements with
multiple classes. (like "it ibo")
Am I doing something wrong here?

--
Amedee