Eric Polerecky

Ok, so yesterday I spent a good deal of the day trying to figure out how to manage the display of DOM elements. I searched Google, the dojo forums, the tests on archive.dojotoolkit.org with no simple answer. Coming from a heavy jQuery background I just could not believe that you had to bring in additional classes and/or write your own functions.

But dojo is a powerful beast, sometimes referred to as an elephant, so I guess I just have to “use the force…er um…power”

Desired Functions

dojo.query(’#hide’).hide();

dojo.query(.’show’).show();

dojo.query(’.toggle’).toggle();

WARNING: The code below is incredibly crude, it does not take into account for inline elements, there are no advanced arguments like fade or animation, and the toggle method is not fully implemented.

   1:  dojo.extend(dojo.NodeList, {

   2:      show: function(){

   3:          console.log(this);

   4:          this.forEach( item.style.display = 'block' );

   5:          return this;

   6:      },

   7:      hide: function(){

   8:          this.forEach(function(item){

   9:              console.log(item);

  10:              item.style.display = 'none';

  11:          });

  12:          return this;

  13:      },

  14:      toggle: function(){

  15:          this.forEach(function(item){

  16:              if(item.style.display == 'none'){

  17:                  //this.show();

  18:                  item.style.display = 'block';

  19:              } else {

  20:                  item.style.display = 'none';

  21:              }

  22:          });

  23:          return this;

  24:      }

  25:  });

PS: thanks Jayant for giving me the put to use the true power of dojo.

Dojo