Simple Toggle

by afarris

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojox/grid/resources/tundraGrid.css">
<div class="tundra">
    <div id="widget">
    <button id="viewToggle"></button>
    <div id="contentContainer">
        <div class="cPane" title="First" style="width: 100%; height: 100px">test</div>
        <div class="cPane" title="Second" style="width: 100%; height: 100px"><p>demo</p></div>
    </div>
        <div id="tabs"></div>
        <div id="titles"></div>
</div>

JavaScript

dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dojox.data.HtmlStore");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.TitlePane");
dojo.require("dojo.NodeList-manipulate");

dojo.addOnLoad(function() {

    dojo.parser.parse("widget");
    
    var cc = dojo.byId("contentContainer");
    
    dojo.query(".cPane").forEach(function(n){
       new dijit.layout.ContentPane({
            title: dojo.attr(n, "title")
        }, n);
    });
    
    var dtc = new dijit.layout.TabContainer({
       style: "height:100px; width: 100%;"
    }, cc);
    
    dtc.startup();    
    
    var tabMode = true;
    
    
    new dijit.form.ToggleButton({
        showLabel: true,
        checked: false,
        onChange: function(val) {
            if (tabMode == true) {
                //dtc.destroyDescendants(true);
                dtc.destroy(true);
                dojo.query(".cPane").forEach(function(n){
                    
                    new dijit.TitlePane({
                        title: dojo.attr(n, "title"), open: "true"
                    }, n), cc;
                });            
            }

        },
        label: "toggle"
    },
    "viewToggle");    

});