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 looks like might have been replaced by dojo.fx
• Some use dijit but thus cannot access a DOM node.
• Some make use of show() and hide()
• Some change the CSS

I can't seem to get any of them to work.

Can someone please point me towards an up-to-date walkthru on this.

---

Solved

Used a combination of the following...

dojo.addOnLoad(function() {
      dojo.style(dojo.byId('myDiv'), "display", "none");
});

and to toggle it

function toggleDivs(){
    if(   dojo.style(dojo.byId('myDiv'), "display") == "none"){
        dojo.style(dojo.byId('myDiv'), "display", "block");
        dojo.style(dojo.byId('myDiv2'), "display", "none");
    } else {
        dojo.style(dojo.byId('myDiv'), "display", "none");
        dojo.style(dojo.byId('myDiv2'), "display", "block");
    }
}

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