MooTools - Accordion

[Ed]

If I wanted the box to be hidden when the page is first displayed, how would I do that?

And in something also stupid-with my CSS and HTML how would I split this box into two columns? I don't want to mess anything up!

Thanks,
Ed

[Ed]

Hello?

[c010depunkk]

Just add "mySlide.hide();" in the onload() function.

[Ed]

This is my code. It doesn't seem to work, and I'm terribly confused. Adding this make the "toggle" function not work, and it still displays the div.

here's the page: http://simplifiedimpact.com/contact.html#

HTML: Select all

<script type="text/javascript">
            window.addEvent('domready', function(){
                //-vertical
                
                var mySlide = new Fx.Slide('test');
                
                $('toggle').addEvent('click', function(e){
                    e = new Event(e);
                    mySlide.toggle();
                    e.stop();
                });

},
    'onload': function(){
        mySlide.hide(); // When page loads, hide
    }
});
                
                
                
                //--horizontal
                
                var mySlide2 = new Fx.Slide('test2', {mode: 'horizontal'});
                
                $('slidein2').addEvent('click', function(e){
                    e = new Event(e);
                    mySlide2.slideIn();
                    e.stop();
                });
                
                $('slideout2').addEvent('click', function(e){
                    e = new Event(e);
                    mySlide2.slideOut();
                    e.stop();
                });
                
                $('toggle2').addEvent('click', function(e){
                    e = new Event(e);
                    mySlide2.toggle();
                    e.stop();
                });
                
                $('hide2').addEvent('click', function(e){
                    e = new Event(e);
                    mySlide2.hide();
                    e.stop();
                });
            });  
    </script>

Help is extremely appreciated,
Ed

[c010depunkk]

Put the hide() directly under the declaration and initialization of the mySlide variables:

HTML: Select all

var mySlide = new Fx.Slide('test');
                
                $('toggle').addEvent('click', function(e){
                    e = new Event(e);
                    mySlide.toggle();
                    e.stop();
                });
mySlide.hide(); // When page loads, hide

[Stuart]

Are you still having problems? If not, please mark this thread as solved via thread tools at the top. Thanks.