Scriptaculous Effect.toggle not appearing when display none set externally

Question

I have a problem getting an element to appear using scriptaculous Effect.toggle, I want the element to start hidden and appear onclick. If I set the element display to none inline the element will appear onclick, but if I set the element display to none in an external css file it does not work.

The script is required for a responsive menu so the display must be set in an external css file and the effect must toggle.

Jsfiddle with both examples: http://jsfiddle.net/TjFKy/

Does anyone know how to resolve this problem? Thank you

Answer 1

Per the documentation, you have to set display: none; inline on these containers for these effects to work correctly.