Question

I have this menu:

<ul id="nav">
<li class="level0">Item 1</li>
<li class="level0 parent">
    <a><span>Click Me!</span></a>
    <div class="submenu">
        <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </div>
</li>
</ul>

I want the submenu to be hidden when the page is loaded. When the user clicks the parent item, the submenu should appear.

When I use inline CSS like this, everything works fine.

<div class="submenu" style="display:none;">

See this demo: http://jsfiddle.net/zJk6P/ (Click on “Click me” in the bottom right to run the demo.)

When I use external CSS like this, the submenu doesn’t appear anymore.

#nav div.submenu{
display: none;
}

See this demo: http://jsfiddle.net/5tNqc/4/

Why is there any difference and how can I get the sliding effect to work with external CSS?

Answer 1

The reason my code didn’t work was that Javascript doesn’t have access to external CSS style declarations. Only inline styles are accessible trough element.style.

Effect.toggle(element, 'slide'); tries to slide the element down when the element is not displayed, and up when the element is displayed. So when the element is hidden by an external style sheet, Effect.toggle will try to slide the element up, because it simply doesn’t “know” the element is already hidden.

The solution is to work with class names. My final solution checks whether the element has a certain class name. When the class name is present, the element is not clicked yet, so the element is slided down and the class name is removed. All next clicks, the element is toggled.

I built and uploaded a small demonstration here: http://i.amniels.com/ext/stackexchange/2011-09/index.html