MooTools Fx.Slide

[MadLittleMods]

Well I am trying to use the mootools fx.slide to get some content to come out when a button is pushed.

 

It is currently not working and I am really bad with java etc. I am really good with html and php. How do I get this script to work?

 

I added the mootools library as so:

<script type="text/javascript" src="scripts/mootools-core-1.3.1-full-compat.js"></script>

 

I also put this in:

	<script type="text/javascript">
	window.addEvent(\'domready\', function() {

	  var status = {
		\'true\': \'open\',
		\'false\': \'close\'
	  };

	  // -- vertical

	  var myVerticalSlide = new Fx.Slide(\'vertical_slide\');

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

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

	  $(\'v_toggle\').addEvent(\'click\', function(event){
		event.stop();
		myVerticalSlide.toggle();
	  });

	  $(\'v_hide\').addEvent(\'click\', function(event){
		event.stop();
		myVerticalSlide.hide();
		$(\'vertical_status\').set(\'text\', status[myVerticalSlide.open]);
	  });

	  $(\'v_show\').addEvent(\'click\', function(event){
		event.stop();
		myVerticalSlide.show();
		$(\'vertical_status\').set(\'text\', status[myVerticalSlide.open]);
	  });

	  // When Vertical Slide ends its transition, we check for its status
	  // note that complete will not affect \'hide\' and \'show\' methods
	  myVerticalSlide.addEvent(\'complete\', function() {
		$(\'vertical_status\').set(\'text\', status[myVerticalSlide.open]);
	  });


	  // -- horizontal
	  var myHorizontalSlide = new Fx.Slide(\'horizontal_slide\', {mode: \'horizontal\'});

	  $(\'h_slidein\').addEvent(\'click\', function(event){
		event.stop();
		myHorizontalSlide.slideIn();
	  });

	  $(\'h_slideout\').addEvent(\'click\', function(event){
		event.stop();
		myHorizontalSlide.slideOut();
	  });

	  $(\'h_toggle\').addEvent(\'click\', function(event){
		event.stop();
		myHorizontalSlide.toggle();
	  });

	  $(\'h_hide\').addEvent(\'click\', function(event){
		event.stop();
		myHorizontalSlide.hide();
		$(\'horizontal_status\').set(\'text\', status[myHorizontalSlide.open]);
	  });

	  $(\'h_show\').addEvent(\'click\', function(event){
		event.stop();
		myHorizontalSlide.show();
		$(\'horizontal_status\').set(\'text\', status[myHorizontalSlide.open]);
	  });

	  // When Horizontal Slide ends its transition, we check for its status
	  // note that complete will not affect \'hide\' and \'show\' methods
	  myHorizontalSlide.addEvent(\'complete\', function() {
		$(\'horizontal_status\').set(\'text\', status[myHorizontalSlide.open]);
	  });
	});
</script>

 

Then i try to implement with this:

echo '<div class="profile_top_menu">';

	echo '
		<h3 class="section">Horizontal</h3>
		<div class="marginbottom">
			<a id="h_slideout" href="#">slide out</a> |
			<a id="h_slidein" href="#">slide in</a> |
			<a id="h_toggle" href="#">toggle</a> |
			<a id="h_hide" href="#">hide</a> |
			<a id="h_show" href="#">show</a> |
			<strong>status</strong>: <span id="horizontal_status">open</span>
		</div>

		<div id="horizontal_slide">
			asdfasdfasdfasdfasdf
		</div>
	';