This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Tuesday, December 2, 2008

Simple ul list with a nice slide-out effect for <li> elements

In the past weeks some readers of this blog asked to me what's a simple way to implement an animated "disappear" effect (using unobtrusive JavaScript code) for an element of a list when an user clicks on a link contained into a <li> element of that list.

I think a very simple way to do that is using MooTools slideOut() effect. This tutorial explains how to implement that using "five" lines of JavaScript code.

Download source code Live Preview


Step 1: Include MooTools framework
First, you may download the latest version of MooTools and add a link to the framework in the tag <head> of the page:

<script type="text/javascript" src="mootools.js"></script>

Step 2: HTML code
Image to implement a simple list of products and for each product into that list add a link "Hide":

<ul id="myList">
<li id="l1">Playstation | <a href="#">Hide</a></li>
<li id="l2">iPod Touch | <a href="#">Hide</a></li>
<li id="l3">XBOX 360 | <a href="#">Hide</a></li>
<li id="l4">Nokia N97| <a href="#">Hide</a></li>
<li id="l5">Dell Inspiron | <a href="#">Hide</a></li>
</ul>

The result is something like this:



How you can see, we have a products list with ID="myList" and some <li> elements with a progressive ID: l1, l2, l3, l5, l5. We want to obtain this effect: when an user clicks on a link ("Hide"), the related <li> element disappear with a nice animated slide out effect. How can we do that? Take a look at the following step!

Step 3: Unobtrusive JavaScript code
Copy and paste this code below the code at the step 1 to enable slideOut() effect:

<script>
window.addEvent('domready', function() {
/* From the list with ID myList, for each li element of the list...: */
$('myList').getElements('li').each(function(e){
/* ...get the ID of the selected item */
e.getElement('a').addEvent('click', function(listID){
/* Enable Fx.Slide effect for the selected item */
var list_element = new Fx.Slide(listID);
/* Enable slideOut() effect */
list_element.slideOut()
}.pass(e.id));
});
});
</script>

That's all! Download the source code or take a look at the live preview.

Download source code Live Preview


Related contents
If you have not confidence with MooTools I suggest you to take a look at this introduction lessons I wrote some time ago:

Lesson 1 - Basic Tips for Web Designer
Lesson 2 - Get elements ID using unobtrusive code
Lesson 3 - Interaction with Forms

blog comments powered by Disqus
Maya said...

Very simple to implement. Thanks

aimee.mychores.co.uk said...

Nice one! But i would like to challenge your step 1.

I have started to encourage web developers to switch to the Google AJAX Libraries API.

No longer does every web developer need to host a copy of their favourite javascript library. Nor does your browser have to download and cache a new copy for every AJAX-enabled site it visits, not if we all start using the Google library.

It's just as simple as changing your javascript src attribute to http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools.js

panduan bisnis online said...

thanks antonio for the tutorial! u the best!

d_sturm said...

Pretty cool. But I would prefer to make it even more unobtrusive and add the hide-links per js, since they have no function without JavaScript enabled.

Stefan said...

Agreed with aimee above, using the Google ajax libraries api can turn out to be a very good practice if more developers start doing it.

Daniele said...

With jQuery:

$(function(){
$("#myList li a").click(function(){
$(this).parent().slideUp();
});
});

wex said...

Would love, if you could make an "Slide_in" example too :)

So we could a grasp on how to slide in and out with the same element.

mim said...

NO aimee when Google isn't available worldwide!!!
for instance I got a "Forbidden" 403 error on that page!
it's silly and it's because google (and many others!) don't let ppl from some countries US set sanctions against them retrieving these pages!
in my case it's for Iran!
although I can't understand what this mean and why US have to put limits for me when I love em even! but anyway it makes the service lack on supporting everywhere after all and not reliable enough to use, I think, :)

mim said...

Hey! again it's mim!
I just access the api by a vpn!
google said by using this api you have "globaly available access"!!!
it's lie for sure... or maybe Iran is not in the globe anymore ?! ah! maybe! so hello from mars! ;)

and I found this cod won't work with last version of mootools, any idea whats the problem? I mean ver 1.2.1

with alot tnx for this nice post woork! appreciate, :)

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News