scriptaculous blindUp/blindDown issue

Question

I wrote a little script that observes clicks and blinds up/down according to the 'display' property, and also added a queue-to-end parameter to the blindUp in order to avoid even more serious display issues. This is obviously not the way to implement this, as display bugs appear if click events are invoked in the middle of the effect.. This is the code:

<script type="text/javascript">
    $$('#leftnav_container #modules h2').each(function(El){
            El.observe('click',function(){
                container = this.next('div');
                display = container.getStyle('display');
               if(display == 'none'){
                    container.blindDown({duration: 0.3});
                }else{
                    container.blindUp({duration: 0.3, queue: 'end'});
                }

            })
    });
</script>

Again, the problem is that I rely on 'display'. What is the proper way to this?

Answer 1

This should simplify it

$$('#leftnav_container #modules h2').invoke('observe','click',function(){
            container = this.next('div');
            Effect.toggle(container , 'blind', { duration: 0.3 });
});

Firstly if you are only running one method on all elements in the array returned from $$() then you can use the PrototypeJS method invoke().

http://api.prototypejs.org/language/Enumerable/prototype/invoke/

Then Effect.toggle() will check if the element is visible and do the appropriate up/down effect.

Try this out and let me know if it works for you.