Drop down with MooTools

a newer version of my drop-down script

Last year, when I launched this version of Jek2k.com, I published a tutorial on how to make drop-down panels like the ones on this site.

As some of you might have noticed, since last month I’ve changed the JavaScripts on this site. I’ve swtiched to MooTools. I’ve used it quite often in my latest projects and I must say I’m finding it pretty easy to use.

For all those who liked the old drop-down script, I’m now posting an updated version with a short tutorial.

—————————

1. Wrap everything inside a DOM Ready Event.

window.addEvent('domready', function() {
	// CODE HERE

});
 

2. Define which Html element ("myPanel") will be affected by the drop-down effect. You might want to hide it, so that it starts collapsed.

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

3. The following lines add a Click event to the "Open Panel" link and add desired effect to open the drop-down panel, fade-out the "Open Panel" link and fade in the "Close Panel" link.

var fx = new Fx.Styles($('openPanel'), {duration:500, wait:false});
$('openPanel').addEvent('click', function(e){
   mySlide.toggle();
 	fx.start({
   	'opacity': 0
   }).chain(function(){
     	$('openPanel').setStyle('display', 'none');
       $('closePanel').setStyle('display', 'block');
       $('closePanel').setStyle('opacity', '0');
       fx1.start({
           'opacity': 1
       });
   });
});
 

4. Lastly, we need some other code to handle the "Close Panel" link, which mirrors the code above.

var fx1 = new Fx.Styles($('closePanel'), {duration:500, wait:false});
$('closePanel').addEvent('click', function(e){
	mySlide.toggle();
   fx1.start({
   	'opacity': 0
  	}).chain(function(){
   	$('openPanel').setStyle('display', 'block');
      	$('closePanel').setStyle('display', 'none');
       $('openPanel').setStyle('opacity', '0');
       fx.start({
       	'opacity': 1
       });
   });
});
 

Please see also MooTools own documentation and demos for the Fx.Slide and the Fx.Styles behaviours.

Download the Source Code (24k ZIP)

—————————

Updated on 22.01.2008
Today my friend Luca, who is a pro developer, emailed me a modified version of the above script, that he has kindly corrected and improved. He also has shortened the script, making it a lot easier.

window.addEvent('domready', function() {
	// Label for link
	var labelOpen='Open Panel';
	var labelClose='Close Panel';

	// Set slide and styles effects
	var mySlide = new Fx.Slide('myPanel').hide();
	var fx = new Fx.Styles($('linkPanel'), {duration:500, wait:false});
	$('linkPanel').addEvent('click', function(e){
		mySlide.toggle();
		$('linkPanel').toggleClass('openPanel');
		fx.start({
			'opacity': 0
		}).chain(function(){
			if($('linkPanel').hasClass('openPanel')) $('linkPanel').setHTML(labelClose);
			else $('linkPanel').setHTML(labelOpen);
			fx.start({'opacity': 1})
		});
	});
});
 

Below is the link to download Luca’s new version:

Download the new Source Code (24k ZIP)

This tutorial is provided as is. Please do not email me questions or support requests about the scripts contained in this page. Use the comments below instead. Thank you.