Solved! Go to Solution.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>App Title</title> <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css"> <style> html, body { height: 100%; width: 100%; outline: hidden; padding: 0; margin: 0; } #map { height: 100%; width: 100%; } </style> <script>var dojoConfig = { parseOnLoad:true };</script> <script src="http://js.arcgis.com/3.6/"></script> <script> require([ "dojo/parser", "dojo/ready", "dojo/dom", "esri/map", "dijit/layout/TabContainer", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"], function(parser, ready, dom, Map){ var map = new Map("map", { center: [-56.049, 38.485], zoom: 3, basemap: "streets" }); }); </script> </head> <body class="claro"> <div id="content" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width: 100%; height: 100%; margin: 0;"> <div data-dojo-type="dijit.layout.TabContainer" style="width: 100%; height: 100%; margin: 0;" region="center" tabPosition="bottom"> <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Screen1', selected:true"> <span id="details">This is Screen One.</span> </div> <div data-dojo-type="dijit.layout.ContentPane" id="mapPane" data-dojo-props="title:'Map'"> <div id="map"></div> </div> </div> </div> </body> </html>
function switchView(viewName) { var divMap = dojo.byId("map"); // map is DIV id for the map view var divOther = dojo.byId("other"); // other is the DIV id for the other view dojo.style(divMap, "display", viewName === "map" ? "block" : "none"); dojo.style(divOther , "display", viewName === "map" ? "none" : "block"); }