How can I slide an element hidden by external CSS with Scriptaculous?

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>
        &开发者_开发百科lt;/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?

---

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

---

The difference is that you don't change display to be set to display: block;, which is the standard, and so it gets overridden by the external explicit definition that it should be hidden. If you add another line in the Javascript to add thisDiv.style.display = block;, and remove it at the end of hiding it, it should work just fine.

Update:

So, the reason that it doesn't show up when you have display: none; in your CSS file, is because when the Javascript animation starts, instead of setting display: block; on your div, which would make it visible, it simply removes the display property on the element entirely, so it is still affected by the external CSS.

My suggestion: if you don't want the Javascript to become more difficult, simply leave the style inline, so that it can be removed later by Javascript automatically. If you want to use an external CSS style for it, you could just add a short helper function to your Javascript to change the CSS display property to block whenever it starts, and set it to display: none after the animation is finished.