title: Change div height to child div's height on click with JS
body: <p>I have a div (divChatContainer) with a top div (divChatContainerTop) that have a "span" element inside it. I want the container div to be resized to the "divChatContainerTop" height when the "span" element is clicked (ie: minimize the chat window so only the "divChatContainerTop" appears).</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;div id="divChatContainer" runat="server" style="overflow-y: scroll; box-sizing: border-box; word-wrap: break-word; width: 20%; max-height: 35%; position: fixed; right: 0px; bottom: 0%; box-sizing: border-box; background-color: #EBECEF; border: solid #3A5896; border-width: 1px 0px 0px 1px; border-radius: 1px;"&gt;
    &lt;div id="divChatContainerTop" style="text-align: right; box-sizing: border-box; width: 100%; padding: 3px;"&gt;
                  &lt;span style="float: left; box-sizing:border-box;width:50%;overflow:hidden;"&gt;Left&lt;/span&gt;&lt;span id="spanChatMinimize" style="float: right"&gt;X&lt;/span&gt;
              &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>External .js file:</p>
  
  <pre><code>document.getElementById('spanChatMinimize').addEventListener('click', function () {
       document.getElementById('divChatContainer').style.height = document.getElementById('divChatContainerTop').style.height + 'px';
  });
  </code></pre>
  
  <p>In debug i notice it's not entering the function. Perhaps the syntax of adding the eventListener is wrong, or maybe the "span" element have other name (on MasterPage sometimes they have "ctl00_elementName"), but i guess it's not the case, as the container element is statically in HTML outside ContenPlaceHolder.</p>
  
  <p><strong>EDIT</strong>:
  The following code WORKS to minimize</p>
  
  <pre><code>document.getElementById('spanChatMinimize').addEventListener('click', function () {
     document.getElementById('divChatContainer').style.height = 10px;
  });
  </code></pre>
  
  <p>But the following code DON'T do nothing:</p>
  
  <pre><code>document.getElementById('spanChatMinimize').addEventListener('click', function () {
    document.getElementById('divChatContainer').style.height = document.getElementById('spanChatMinimize').style.height + 'px';
  });
  </code></pre>
  
  <p>So i am assuming i am not being able to get "divChatContainerTop" or the "span" height. Can't we get a screen height instead of height property?</p>