JavaScript: setting main div tag height to zero which makes all the sub divs have a height of zero
<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>