Initially hiding a div with a mootools script (FX slide)

JavaScript
1

Been trying to solve this all morning at work and I’m at the end of my tether.

I’m using this script in a page I’m doing…
http://demos.mootools.net/Fx.Slide

It ‘hides / shows / slides in / slides out’ a div. Problem is it’s initial state is to show the div. I need it to initially hide the div. I’m added .hide(); (see code in bold) which successfully hides the div, but the event clicks won’t now work…
<a id=“v_slideout” href=“#form” >book a demonstration</a>
The div remains hidden. Can anyone tell me how to resolve this please? I’m not great with js, but I’m guessing anyone with a rudimentary knowledge know’s what I’m doing wrong. Please help, I’m going nuts!

window.addEvent('domready', function() {
							 
	var status = {
		'true': 'open',
		'false': 'close'
	};
	
	//-vertical

	var myVerticalSlide = new Fx.Slide('vertical_slide')[B].hide();[/B]	


	$('v_slidein').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.slideIn();
	});

	$('v_slideout').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.slideOut();
	});


	$('v_hide').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.hide();
		$('vertical_status').set('html', status[myVerticalSlide.open]);
	});
	
	$('v_show').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.show();
		$('vertical_status').set('html', status[myVerticalSlide.open]);
	});