Question

I have a toggle event on specific div witch works fine ,
here is the demo
http://jsfiddle.net/b5SVg/9/
the trouble is that I have the outside container that I need to hide on load and show/hide on toggle. CUrrently my container display block fires first and I need it to be sinced wht the toggle. I know you might think that i should put the container inside the toggle but i cant since the FX.slide adds div around toggle element which is overflow hidden and has position . my container must stay where it is. Please advise

Answer 1

Read the comments on the code below 😉

var container = $$('.container').setStyle('display','none'); //cache container (useful for the 'future' ;) )"

var mySlide= new Fx.Slide('hidden').hide();

$('toggle').addEvent('click', function(event){

    event.stop();

    container.setStyle('display','block'); //put it before the toggle

    mySlide.toggle().chain(function(){ //at the end of the sliding, this callback will be called
        if(!this.open){ //if it's closed
            container.setStyle('display', 'none'); //hide the container
        }
    });

});

Demo: http://jsfiddle.net/amgyw/1/

..btw you also can use the element proper instance of ‘slide’, without declaring var mySlide = ... ..like i.e. $('hidden').get('slide').toggle()