Dojo Toggle Hide and Show Divs

Question

I\'ve done some searching and come up with a lot of mixed results for using Dojo to toggle divs showing vs hidden.

• Some use dojo.style which it lo

Answer 1

For reference, in dojo 1.7 and up the definition is slightly different (because of the AMD loader). See the third example in dojo reference guide.

The code is basically:

require(["dojo/fx/Toggler", "dojo/fx", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(Toggler, coreFx, dom, on){
  var toggler = new Toggler({
    node: "toggle-id",
    showFunc: coreFx.wipeIn,
    hideFunc: coreFx.wipeOut
  });
  on(dom.byId("hideButton"), "click", function(e){
    toggler.hide();
  });
  on(dom.byId("showButton"), "click", function(e){
    toggler.show();
  });
});

where showFunc and hideFunc are custom animation functions which not only show/hide the node but also expand/collapse their height. Note, that if showing/hiding a dijit widget the toggle id should be the parent of the widget id, for example:

where textarea-id is the id passed as srcNodeRef when creating a dijit widget, like ComboBox or TextArea, with operator new (see "toggle-id" in the code example above).