Toggle Tabs

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"><p>test</p></div>
        <div class="cPane" title="Second" style="width: 100%; height: 100px"><p>demo</p></div>
    </div>
</div>

JavaScript

dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.TitlePane");

dojo.addOnLoad(function() {

    dojo.parser.parse("widget");
    
    var cc = dojo.byId("contentContainer");
    var tabMode = true;
    
    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();    

    new dijit.form.ToggleButton({
        showLabel: true,
        checked: false,
        onChange: function(val) {
            if (tabMode == true) {
                dtc.destroyRecursive(true);
                dtc.destroy(true);
                dojo.query(".cPane").forEach(function(n){
                    tabMode = false;
                    console.log('found contentPane');
                    new dijit.TitlePane({
                        title: dojo.attr(n, "title"), open: "true"
                    }, n), cc;
                });            
            }

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

});