Scriptaculous is a visual effects Library for javascript. It's used quite a bit because it comes with all ruby on rails applications by default. In our upcoming Item Management application, Opal, we use scriptaculous quite a bit to make boxes and other html items do interesting things. Here's an example of how you can use scriptaculous to toggle(turn on/off) an item, and also how you can replace one item with another with a cool visual effect.

Assuming we've just started a new webpage, here's what we do:

First We Need to Load the Scriptaculous & Prototype Library:

The Prototype Library is also required to run Scriptaculous.

Then We'll add our Javascript Functions that will control how Scriptaculous will work with our objects:

By the way, these javascript functions are designed to be customizable, so you can change the effect according to your taste. For example, if I wanted the box to shrink down instead of fade out, I would change line 26 to:

	new Effect.Shrink(element, {duration:0.5}); // Hide Element(Must be an Appearing effect listed above)

Just be sure not to do use an appearing effect instead of a disappearing effect, otherwise weird things will happen. Let's move on.

Now we'll create the object that is hidden on the page. Note the id is my_box.

	

		
This is very cool!
	

Now we need to create a link(can be a hyperlink, image, anything, etc.) to trigger the effect. Notice how we tell it the id of the object to toggle.

	Toggle Box!

That's all there is to it! Give it a try: Toggle Box!



Also, you can replace one object with another using the code provided above.

Add the two objects, notice that one is hidden and the other is not.

	

		
This is very cool!
	
	

		
This is horrible!
	

Now we add the link that will trigger the switch. Notice that we have to pass in the ids of both objects. Also, notice how one of the boxes is hidden(with css's display:none property).

	Replace Box! - 
	Replace Opposite Boxes!

Will it work? Let's Give it a try: Replace Box! - Replace Opposite Boxes!