title: JavaScript: setting main div tag height to zero which makes all the sub divs have a height of zero
body: <p>I just want to use some css to make the height of a div 0 which also makes all the heights of the sub divs 0. I then want to call a javascript function which when clicked it makes the height of the main div 100%.</p>
  
  <p>Here is the code that I have written: </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="menuTitle" id="ButtonsTopStyle" onclick="ButtonsTop"&gt;CONNECTING   RODS&lt;/div&gt;
  &lt;div class="buttonsTop" &gt;
      &lt;img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" /&gt;
      &lt;img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" /&gt;
      &lt;img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" /&gt;
  &lt;/div&gt;
  
  &lt;div class="menuTitle" id="ButtonsBottomStyle" onclick="ButtonsBottom"&gt;CRANKSHAFTS&lt;/div&gt;
  &lt;div class="buttonsBottom"&gt;
      &lt;img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" /&gt;
      &lt;img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" /&gt;
      &lt;img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.smallButtons {
      box-sizing: border-box;
      margin-left: 10px;
      height: 50px;
      width: 50px;
      margin-top: 15px;
      background-color: white;
  }
  
  .menuTitle {
      color: white;
      font-family: "Arial";
      text-align: center;
      font-size: 30px;
      padding-bottom: 30px;
      padding-top: 30px;
  }
  
  .buttonsTop {
      margin-left: 23px;
  }
  
  .buttonsBottom {
      height: 0;
      margin-left: 23px;
  }
  </code></pre>
  
  <p>The css I have written doesnt make the height of the .buttonBottom zero they are still being displayed on the page. I don't want them to be displayed on the page</p>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>function ButtonsBottom() {
      document.getElementById("ButtonsTopStyle").style.height = "0";
      document.getElementById("ButtonsBottomStyle").style.height = "100%";
  }
  
  function ButtonsTop() {
      document.getElementById("ButtonsBottomStyle").style.height = "0";
      document.getElementById("ButtonsTopStyle").style.height = "100%";
  }
  </code></pre>
  
  <p>As you can see I want the buttonsBottom to not be visible on the page when it loads but when you click on the <code>onclick="ButtonBottom"</code> div it makes the height 100% and makes the <code>onclick="ButtonsTop"</code> div have a height of 0</p>