Implementing Basic and Fancy Show/Hide in MooTools 1.2

Written by David Walsh on Monday, May 5, 2008

This article may feature code that is no longer best practice in MooTools.
Click here to learn what has changed to make your code framework-compatible.

One of the great parts of MooTools is that the library itself allows for maximum flexibility within its provided classes. You can see evidence of this in the “Class” class’ implement method. Using the implement method, you can add your own methods to custom or core classes.

I’ve created a really basic example and more advanced example of implementing show and hide on the Element class. By implementing show and hide, I can call show() and hide() on any element of any type that I want!

View Demo

Basic Example – MooTools Javascript

//when the dom is ready...
window.addEvent('domready', function() {
	//time to implement basic show / hide
	Element.implement({
		//implement show
		show: function() {
			this.setStyle('display','');
		},
		//implement hide
		hide: function() {
			this.setStyle('display','none');
		}
	});
});

Basic Example – XHTML / Usage

<p>
	<strong>Basic: </strong><a href="javascript:$('blove').show();">Show</a> | <a href="javascript:$('blove').hide();">Hide</a><br />
	<img src="/dw-content/beatles-love.jpg" id="blove" />
</p>

As you can see, the links call the image element’s show and hide methods.

Fancy Example – MooTools Javascript

//when the dom is ready...
window.addEvent('domready', function() {
	//time to implement fancy show / hide
	Element.implement({
		//implement show
		fancyShow: function() {
			this.fade('in');
		},
		//implement hide
		fancyHide: function() {
			this.fade('out');
		}
	});
});

Fancy Example – XHTML / Usage

<p>
	<strong>Fancy: </strong><a href="javascript:$('blove2').fancyShow();">Show</a> | <a href="javascript:$('blove2').fancyHide();">Hide</a><br />
	<img src="/dw-content/beatles-love.jpg" id="blove2" />
</p>

View Demo

Instead of the not-so-subtle show and hide that we used in the basic example, I’ve chosen to use a softer fade in and fade out effect. Implementing methods is that easy!

Download PDF

Follow via RSS Epic Discussion

May 05 / #

Tim Novinger says:

Very cool and a great idea of a script to put into your general bag of JS tricks (typically an enhancements.js script in my case). Love the rockage of Mootools lately in your blog ;)

Only criticism is that you’re using inline JS to handle the events. This would be much nicer if the JS parsed the HTML for links with .show or .hide classes and apply it where ever they were.

Normally this would be an obvious “duh”, but then again so is this script. If fledgling developers are discovering this for the first time I worry that they would not know to take that extra, but well worth, step during development.

May 05 / #

david says:

@Tim: I see your point but the usage wasn’t really the main point. That said, I could put more Moo in the header that looked something like:

$('myanchor').addEvent('click', function() { $('correspondingElement').hide(); }

Thanks for reading!

May 05 / #

david says:

Oops, didn’t end that right:

$('myanchor').addEvent('click', function() { $('correspondingElement').hide(); });

May 05 / #

Tim Novinger says:

LOL, have to remember those ending );’s – always slightly tricky.

Hey….thanks for writing! Love the posts you put through and on a daily basis too.

May 05 / #

Catar4x says:

It’s better than the simple effect display:none/block lol
Thanks David ;)

May 05 / #

Louis says:

That looks to me like you are inventing the wheel again. There is a native Mootools method to fade elements.

http://docs12b.mootools.net/Fx/Fx.Tween#Element:fade

May 05 / #

david says:

@Louis: Yes and no. Yes, I’m using the fade effect that’s already there, but my goal with the article is show how to implement a method. Instead of using fade, I could put a whole ton of effects in there.

May 05 / #

Louis says:

Yes, I understand David. The title confused me a little bit, but you are right.

This is more like a pattern :)

May 05 / #

david says:

@Louis: No, it’s my bad. After your initial post, I thought to myself “probably not the best title.” Misleading. Oh well, hopefully this clears things up.

June 17 / #

elvis says:

Hi, David.
Is it possilbe to post how to make tooltips with mootools 1.2 please?
Thanks for a great tut.

June 17 / #

david says:

@Elvis: I have that post already written but I have a trouble ticket into MooTools — part of what they’re doing is wrong.

June 18 / #

elvis says:

Hi David.
I just can’t figure it out how to use tooltips with 1.2.
I can see you are still using 1.11 for your tool tips as well.
I am looking forward when you figure it out.

July 23 / #

Louisk says:

Nice script. I am wondering if you could help us out with the following. On the mootools demo page (1.1) when you click on the js code links to show the js code, it hides the other panes if their are open. I can get the script but it’s not working with 1.2, how to do this?

September 11 / #

peter says:

Hi David, I’m just getting started with mootools and I really love your posts, they are most helpfull to me. (I’m having a hard time finding good info and tutorials….)

I’m trying to extend this script with the following :
Have table rows hide on the basis of selection criteria through checkboxes.

Currently I have a simple version working, but it only hides the first corresponding row ID it finds in the table. All the others with the correct ID don’t hide.

Another thing I’m trying to do is, when a row hides, have the others scroll up… but first I need to find how to pass multiple id’s to the function.

Do I need to pass it as an array ?

September 24 / #

dazbot says:

Hi David, just stumbled across this script, its fantastic. Could you tell me how I could make ‘hide’ default, then on clicking ’show’ it errrrm shows the picture or whatever.

January 13 / #

liam dilley says:

Agreed, I am trying and have been trying to do a hidden div to show toggle for a bit and it is giving me a headache.
window.addEvent(‘domready’, function() {
$(‘login-form’).setStyle(‘height’,'auto’);
var myVerticalSlide = new Fx.Slide(‘login-form’).hide();
$(‘toggle-login’).addEvent(‘click’, function(e){
myVerticalSlide.toggle();
e.stop();
});
});

The above is for a slide toggle and I am trying to do the same with a fade.

January 28 / #

Jaime Schultz says:

Hi David,
I just read your blog about Implementing Basic and Fancy Show/Hide in MooTools 1.2. I have a question, since yours seems to work in all browsers, what could be the reason onChange hide/shows work in IE and not Firefox or safari?

March 09 / #

Ashley says:

I’ve been looking for the same thing Liam mentioned and cannot find a slide combined with a fade. Here’s a perfect example:

http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

Of course, it’s written using JQuery. Has anyone seen a Moo version?

March 09 / #

David Walsh says:

@Ashley — write one! :) It wouldn’t be that difficult.

March 09 / #

Liam says:

I have done a few in Jquery too, Just having issues in mootools for some reason.

March 09 / #

Ashley says:

You’ve got the fancy-shmancy blog with moo scattered about…you write one! :)

Besides, I’m just a designer that lets you guys do all the hard work. LOL

So, check back tomorrow? OK, fine, Wednesday…sheesh.

August 31 / #

Eric Lee says:

Is there a way to put a duration on the fading in and out of the display element? The fade() only works on opacity it seems, and so when an item is faded out, it still shows the block height element. I’d like to be able to fade out (in a “fancy” way) an element’s display from “block” to “none”. Is that possible? So far in my tests it seems to only want to act as if there is no duration:

//set the div to be invisible on load
$(‘theDiv’).setStyle(‘display’,'none’);

var myEffect = new Fx.Tween($(‘cotp_desc’), {
property: ‘display’,
duration: 2000, //set the duration of the fade
transition: Fx.Transitions.Quad.easeIn
});

$(‘hideDesc’).addEvent(‘click’, function(event) {
myEffect.start(‘none’);
});

$(’showDesc’).addEvent(‘click’,function(event){
myEffect.start(‘block’);
});

HTML:

August 31 / #

Eric Lee says:

And, oops, the “cotp_desc” should really be “theDiv” on the second line of script.