Toggling the display of a Dojo dijit

Question

I am trying to implement a basic show/hide of a div dijit in Dojo. Based on other javascript frameworks I've worked with, this should be easy, but I've found it difficult at best.

Here is the code from the

<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.require("dijit.layout.ContentPane");
dojo.require("dojo.fx");
var toggler = null;
function basicToggle() {
    toggler = new dojo.fx.Toggler({
        node: "panel",
        showFunc : dojo.fx.wipeIn,
        hideFunc : dojo.fx.wipeOut
    })
}
dojo.addOnLoad(basicToggle);
</script>

Below is my code in the body.

<button dojoType="dijit.form.Button">    
    <img src="wrapper/images/header-settings.png" border="0" />     
    <script type="dojo/method" event="onClick">   
        toggler[dijit.byId("panel").attr("displayed") ? 'show':'hide']();
    </script>
</button>   
<div id="panel" dojoType="dijit.layout.ContentPane" style="border: .2em dotted     #900;display: none">
This is a content pane.</div>
</body>

The behavior that I am seeing right now is that the div is displayed momentarily after clicking on the button, but then is hidden again. What am I doing wrong?

Answer 1

I think you have the show/hide logic backwards? Also, I think 'displayed' is from a very, very old version of Dojo. Try just looking at the style instead (note that this once again flips the logic as I check for 'none')

toggler[(dojo.style("panel","display") == "none") ? 'show':'hide']();

There's an example in the docs which uses dojo.connect to achieve the same effect.