T H E
W O O R K
H A N D B O O K
v
0 . 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>
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!
108