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


Tags: javascript,css,prototypejs,scriptaculous

Problem :

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?



Solution :

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


    CSS Howto..

    How to control the size of a table cell in css

    How to use vertical menus in HTML and css?

    How to make a child div alone responsive using css?

    How to modify your CSS working with Mobile Angular UI and Bootstrap

    How to change angularJS's default css styles? Search box etc

    How to resize image on window resize in CSS?

    Css. How to move div with fixed position up if it overlays footer

    How can I set my unordered list to be in the middle not in-line (see image)?

    How can I vertically align the text in an anchor tag?

    How to match baseline in two floating divs

    jquery how to regex css style positive to negative, negative to positive?

    (CSS) Set Id for Class How to Use

    How to use psd elements in an upload form? [closed]

    How to write LESS specific to a controller/page in angular with ES6

    How to remove free jqgrid own horizontal scrollbar if autowidth:true is used

    How to set border radius of some corner only with CSS

    How to load dynamic content (get, html, data) via jquery/css in Wordpress?

    Home and Contact Us tab's hover effects in my dropdown navigation menu not how I want it

    CSS - How to upscale Unicode arrows?

    How to add js and css files in ASP.net Core?

    How do I center a button in html5?

    How can I use an alert or form input to allow a user to set a value of a CSS parameter [closed]

    How to set select box height in jquery moblie?

    How to remove width with center DIV

    How to create a vertical column in a table using css

    how to center align IMG in div?

    CSS (or jQuery): How to set horizontal scrollbar in the middle position?

    HTML: How to change the width of input field based on container size

    How to write bootstrap media queries

    CSS, how to add picture in the corner of every columns