BorderContainer - Toggle Bottom

by cswing

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
<body class="claro">
    <div id="container" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline', gutters: true">
        <div id="top" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top', layoutPriority: 1">
            Top!
        </div>
        <div id="center" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">
            <div class="mapButtons">
                <div class="leftTitlePane" data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'Map Overlays', closable: false, open: false">
                    <div data-dojo-type="dijit.layout.ContentPane" style="width: 380px; height: 280px; overflow: auto;">
                        <div id="mapoverlaysGallery"></div>
                    </div>
                </div>                    
                <div class="rightTitlePane" data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'Switch Basemap', closable: false, open: false">
                    <div data-dojo-type="dijit.layout.ContentPane" style="width: 380px; height: 280px; overflow: auto;">
                        <div id="basemapGallery"></div>
                    </div>
                </div>    
            </div>
            Center!
        </div>
        <div id="bottom" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom', layoutPriority: 2">
            Bottom!
        </div>
    </div>
</body>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

#container {
    width: 100%;
    height: 100%;
}

#leading {
    width: 100px;
}

#bottom {
    height: 40px;
}

.mapButtons { 
    position: absolute;
    right: 5px;
    top: 5px;
    z-Index: 999;   
}

.mapButtons .dijitTitlePane {
    float: left;
    margin: 5px;
}

.leftTitlePane .dijitTitlePane {
    
}

.rightTitlePane .dijitTitlePane {
    z-Index:1000;
}

JavaScript

dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.TitlePane");
dojo.require("dijit.layout.BorderContainer");