YUI toggle (with animation)

Files needed

For this snippet you need the files: yahoo-dom-event.js and animation-min.js from the Yahoo User Interface Library (version 2.4.1).

Code

To use this snippet add a class "toggle" to a link which should toggle the effect. To this link add a rel attribute. This attribute contains: id of object to toggle, animation type, animation duration.

<a href="#" rel="example1,fade,20" class="toggle">Toggle element #1</a>

This will toggle the div with id "example1", the effect used will be "fade" and it will take "20" frames.

Example

Click this link A to toggle element 1

Click this link B to toggle element 2

Element #1

This element can be hidden by clicking the link above.

Element #2

This is an element below the animated element

Click this link C to toggle element 1