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

Why don't you use dojo.fx.Toggler?

var toggler = new dojo.fx.Toggler({

        node: "basicNode"

    });

    dojo.connect(dijit.byId("showButton"), "onClick", toggler, "show");
    dojo.connect(dijit.byId("hideButton"), "onClick", toggler, "hide");
}`

From dojo reference-guide:

The functions Toggler.show() and Toggler.hide() both return the animation object for the animation in play. This object can be used to stop, pause, set the current animation location ‘percentage’, and get the status of the animation.

Answer 2

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:

<div id="toggle-id"><div id="textarea-id"></div></div>

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).