Simple Toggle

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">
        <div><button id="viewToggle"></button></div>
    <table id="data1" style="display:none">
        <thead>
            <tr>
                <th>title</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>first</td>
            </tr>
            <tr>
                <td>second</td>
            </tr>
            <tr>
                <td>third</td>
            </tr>
        </tbody>
    </table>        
    <div dojoType="dojox.data.HtmlStore" dataid="data1" jsId="data1Store"></div>        
        <div id="contentContainer" style="display:none">
            <div dojoType="dijit.layout.ContentPane" title="First"><p>Shared Content</p></div>
            <div dojoType="dijit.layout.ContentPane" title="Second"><p>Shared Content 2</p></div>
            <div dojoType="dijit.layout.ContentPane" title="Third">
            <table jsId="grid" dojoType="dojox.grid.DataGrid" store="data1Store" autoHeight="true">
                <thead>
                    <tr>
                        <th field="title">Title</th>
                    </tr>
                </thead>
            </table>
        </div>
        </div>
        <div id="tabContainer"> <div id="tabs" dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100px"></div></div>
        <div id="titleContainer">
        </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.require("dojo.fx");
dojo.require("dojox.data.HtmlStore");
dojo.require("dojox.grid.DataGrid");

dojo.addOnLoad(function() {
    
    
    dojo.query("#contentContainer div").forEach(function(n){
        
       dojo.place(dojo.clone(n), dojo.byId("tabs"))
       
       dojo.place(dojo.attr(dojo.clone(n),"dojoType","dijit.TitlePane"), dojo.byId("titleContainer"))

    });

              
    dojo.parser.parse("widget");
    
    dojo.style("titleContainer","display","none")  
        
    var isTabs = true;
        
    var button = new dijit.form.Button({
        label: "Titles",
        onClick: function(n){
            if (isTabs) {
                this.attr("label", "Tabs");
                isTabs=false;
                dojo.style("tabContainer","display","none");
                dojo.style("titleContainer","display","block");                
            } else {
                this.attr("label", "Titles");
                isTabs=true;
                dojo.style("tabContainer","display","block");
                dojo.style("titleContainer","display","none");                   
            }
            

        }
    }, "viewToggle");      
        
   
    

    
});