title: How can I make the height of a div bigger onclick of a button and then change back to it's original height when click again?
body: <p>I have a div <code>id="coding"</code> set on <code>height:300px</code> on <code>CSS</code>.
  when I click another div <code>id="menu"</code>, I want #coding to change it's height to <code>800px</code>. I managed to do that like this</p>
  
  <pre><code>&lt;script&gt;
      function changec() {
          document.getElementById('coding').style.height = "800px";
      }
  &lt;/script&gt; 
  </code></pre>
  
  <p><br>
  Now, when click the #menu again, I want the height to get back to it's original <code>300px</code> value. Can someone help? The code is:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="coding"&gt;
  &lt;div id="menu" onclick="changec()"&gt;≡&lt;/div&gt;
  ...
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#coding{
      ...
      height:300px;
  }
  </code></pre>