Yesterday while at work I was building some functionality into the user interface using show and hide with div’s when a workmate pointed out the Scriptaculous library. Now this little thing is amazing, by making something like the onClick action point to one of Scriptaculous’s effect functions I can have cool slide downs or fades to make my interface look really slick. Of course you can have over kill but its very hard.
To create a form that would slide out when you click a link is easy. Include the JavaScript files and then using a div with the onClick value set to something like “Effect.toggle(’div_id’, ‘effect’)” and then set the id of the div you want to show/hide to the value you set in the effect (and set the div to have style=”display:none;”, to hide it at the start). If you want to get really fancy set the div’s onMouseOver and onMouseOut to something to give the hover over effect. I normally go with a light colour for the background and a darker version of the same colour to get a nice look.
The thing I love about Scriptaculous is that you get all these effects that you see on the high-end “web 2.0″ sites with the use of a simple (to use, but complex on the inside) but comprehensive library and I will definitely be using it for my next website to make things a lot smoother.
There is one to note about this though, and that is that be careful when using this to show/hide actual content and by content I mean text that you want the search engines to read because they will not like reading inside div’s that have their display property set to ‘none’ and because of this it is best using in terms of forms or inside member area’s where search engines shouldn’t be lurking other than that, go nuts!
Enjoy.

mark
