Saturday, 26 January 2008

Toggle effect using Scriptaculous

Another post dedicated to Scriptaculous and to a nice way to implement Toggle effect.

This tutorial explains how to implement a simple Toggle effect using Scriptaculous framework. I prepared a simple tutorial you can download to see it in action:


Download this tutorial

To use scriptaculous effect on your pages you have to add this lines of code in the <head> tag:

<script language="javascript" src="scriptaculous/prototype.js"></script>
<script language="javascript" src="scriptaculous/scriptaculous.js"></script>

Then, you can apply Scriptaculous Toggle effect using this simple code, for example calling this function inside "onClick" attribute:

Effect.toggle('ID','type-of-effect'); return false

...where "ID" is the element you want to apply the toggle effect and "type-of-effect" is a toggle "sub-effect" (blind, appear, slide). I chose as toggle sub-effect "blink":

<h1 onclick="Effect.toggle('about-me','blind'); return false">About me</h1>
<div id="about-me">...some content...</div>


In this way you can apply this effect to every element using HTML "id" attribute.

Download this tutorial

No comments:

Post a Comment