hide and close DIV

jaykapalczynski

I am looking at this example:  ArcGIS API for JavaScript Sandbox 

1. How could you modify this so the chart div is hidden on load...sure you can just set that property in HTML style.
   
   1. or on map load dijit.byId("profilecontainer").domNode.style.visibility = 'hidden';
2. BUT when the user hits the polyline button it then opens the chart to say 40%
3. BUT i also need to close the chart window...maybe a button below the miles selector.
   1. It would need to close the chart window and then expand the map to the full area.

So I guess I am asking how to control two containers.

When one opens it sizes to 40% height and 100% width

When it closes the map window resizes to 100% 

jaykapalczynski

I was able to do it this way....any other suggestions to improve welcome

I open the div when the user completes the drawing of the polyline with:

  dijit.byId("profilecontainer").domNode.style.visibility = 'visible';

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>elevationdiv<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>dijit/TitlePane<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-props</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>title:<SPAN class="punctuation token">'</SPAN>Elevation<SPAN class="punctuation token">'</SPAN>, closable:false, open:false<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>info2<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>label</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Digitize a route:<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>label</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>button</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>Polyline<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>button<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>Polyline<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>button</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>button</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>FreehandPolyline<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>button<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>Freehand Polyline<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>button</SPAN><SPAN class="punctuation token">></SPAN></SPAN> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>label</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Select unit measure:<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>label</SPAN><SPAN class="punctuation token">></SPAN></SPAN>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>select</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>unitsSelect<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>option</SPAN> <SPAN class="attr-name token">value</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>esriMiles<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>Miles<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>option</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>option</SPAN> <SPAN class="attr-name token">value</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>esriKilometers<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>Kilometers<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>option</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>option</SPAN> <SPAN class="attr-name token">value</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>esriMeters<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>Meters<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>option</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>option</SPAN> <SPAN class="attr-name token">value</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>esriNauticalMiles<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>Nautical Miles<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>option</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>option</SPAN> <SPAN class="attr-name token">value</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>esriYards<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>Yards<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>option</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>option</SPAN> <SPAN class="attr-name token">value</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>esriFeet<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>Feet<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>option</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>select</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN> 
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>map<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>dijit/layout/BorderContainer<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-props</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>region:<SPAN class="punctuation token">'</SPAN>center<SPAN class="punctuation token">'</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN>100%</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>profilecontainer<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>dijit.layout.ContentPane<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-props</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>region:<SPAN class="punctuation token">'</SPAN>bottom<SPAN class="punctuation token">'</SPAN><SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>profileChartNode<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

<SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"elevationdiv"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>dijit<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"elevationdiv"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>open<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//alert("open");</SPAN>
&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>dijit<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"elevationdiv"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>open<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//alert("closed");</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; dijit<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"profilecontainer"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>visibility <SPAN class="operator token">=</SPAN> <SPAN class="string token">'hidden'</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">clear</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; epWidget<SPAN class="punctuation token">.</SPAN><SPAN class="token function">clearProfile</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//Clear profile</SPAN>
&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>