Dojo Toggle Hide and Show Divs

toggle visibility dojo
ZMorek picture ZMorek · Sep 1, 2011 · Viewed 37.4k times · Source

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

sica07 picture sica07 · Sep 1, 2011

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.

Related questions

Toggle Checkboxes on/off

I have the following: $(document).ready(function() { $("#select-all-teammembers").click(function() { $("input[name=recipients\\[\\]]").attr('checked', true); }); }); I'd like the id="select-all-teammembers" when clicked to toggle between checked and unchecked. Ideas? that aren't dozens of lines of code?

Read More
How to getElementByClass instead of GetElementById with JavaScript?

I'm trying to toggle the visibility of certain DIV elements on a website depending on the class of each DIV. I'm using a basic JavaScript snippet to toggle them. The problem is that the script only uses getElementById, as getElementByClass …

Read More
How to toggle a boolean?

Is there a really easy way to toggle a boolean value in javascript? So far, the best I've got outside of writing a custom function is the ternary: bool = bool ? false : true;

Read More