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.