Switch display Dojo dijit

Question

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

Here is the code from

<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 see now is that the div appears instantly after clicking on the button, but then hides again. What am I doing wrong?

Answer 1

I think you have show / hide logic back? Also, I think it is "displayed" from a very old version of Dojo. Try just looking at the style instead (note that this flips the logic again when I check no)

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

, Dojo.connect .