Using Dojo for a simple show/hide toggle effect.

Without a doubt, my favorite Javascript library is Dojo Toolkit. Unfortunately, it can be a bit challenging to learn via the dojo.manual, especially if you aren’t interested in the widgets, just the DOM, UI, and FX libraries. I just wrapped up a project where I used Dojo quite heavily on the site. One effect I thought was particularly effective was a simple show/hide toggle with nice fades. Take a look at the live page. It is a simple page, and the code that produces is it is simple, easily understood, and quite cross-browser friendly. Note particularly that I did not use any inline javascript.

How I implemented the effect

Markup First, I made a div section which would be toggled, giving it the id of “suggestions”. Also, I made a graphical button and gave it the id “hider”. Lastly, I made another matching button with the “toggle back on” text. Code Then, I activated the toggle with this code:


// show/hide toggle the "suggestions" div
function toggleSuggestions() {
   var suggestion = dojo.byId("suggestions");
   var hider = dojo.byId("hider");

   var display = suggestion.getAttribute('displayed');

   if (display == 'on') {
     dojo.lfx.toggle.fade.hide(suggestion, 1000);
     // change the button image
     display = 'off';
   } else {, 1000);
     // change the button image back
     display = 'on';
   // remember the toggle state
   suggestion.setAttribute('displayed', display);

// dom hook and setup
function serenityInit() {
   var hider = dojo.byId('hider');
   // wire the event without using inline javascript, sweet!
   var suggestion = dojo.byId("suggestions");

   // set the default displayed state
   suggestion.setAttribute('displayed', 'on');

// Add the init to the load chain for the page.

Coders Eye - Web Dev Tutorials and How-To Guides for Beginners
Enable registration in settings - general