显示/隐藏功能-多余的空格

Question

In relation to my other post earlier- Show/hide section based on dropdown -js that got answered by @Moob I now have another issue. With the same code- whenever the page is reloaded, there is a huge gap after the drop-down where the text will display if a certain choice is selected. Any ideas why it is doing that?

Here is the codepen.io: http://codepen.io/Nestalna/details/qpjsy

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
    function show(aval) {    
        if (aval == "0") {//if 1 then show it
            optionyes.style.visibility='visible';
            optionyes.style.display='block';
            Form.fileURL.focus();
    } 
        else {//for everything else hide it
            optionyes.style.visibility='hidden';
            optionyes.style.display='none';
    }    
}
</script>

<div class="row">
            <label id="title" for="degree">Which degree are you interested in? </label><br />

                <select id="degree" name="degree" onchange="java_script_:show(this.options[this.selectedIndex].value)" >
                    <option selected="selected" value="Please select one"> Please select one </option>
                    <option value="0" > Concurrent Enrolment </option>
                    <option value="1" > 2015 Applied Bioethics Summer Study </option>
                    <option value="2"> Non Degree (9 hours or less) </option>
                </select>
        </div>      

        <div id="optionyes" style="visibility:hidden" >You have selected <strong>red option</strong> so i am here Lorem ipsum dolor sit amet, mel fugit epicuri laboramus ei, modo elit elitr sea te. Debitis adipisci per ne, qui ea quem nonumy possit, ea falli suscipiantur eam. Ei recteque partiendo deterruisset has. Dicit detracto similique his ad, has liber atomorum prodesset ea, cu dicant vocibus electram est.

Qui eu putent sadipscing, vis dolore fabulas cu, nec hinc justo laoreet cu. Est in dicant iudicabit elaboraret. Admodum imperdiet necessitatibus ea vim, no agam atqui definitionem his. Pri ea iriure efficiantur, accumsan assueverit vim ut. Ea vim quem nobis perfecto, probo nusquam consectetuer ne sed, vis dolorem corrumpit ea.

Mucius appetere duo id. Cum sale mazim ei. Vix melius intellegam ut. Mei ea audire delenit urbanitas. Cu eum civibus corrumpit dissentiunt, in augue prompta splendide eum.

Mei in augue nulla partem, at usu falli euismod. Regione recteque aliquando ad mei, posse soluta dicunt ex nec. Quis phaedrum scripserit ad vis, ex theophrastus necessitatibus ius, usu in veri errem dolores. Ea his latine dolorum. Id nec malis decore expetendis, atqui soleat nominati ius at.</div>

<div class="row">
            <label for="fname">First Name:</label><br />
            <input id="fname" class="input" name="fname" type="text" value="" size="30" /><br />
        </div>

        <div class="row">
            <label for="lname">Last Name:</label><br />
            <input id="lname" class="input" name="lname" type="text" value="" size="30" /><br />
        </div>

        <div class="row">
            <label for="mname">Middle Name:</label><br />
            <input id="mname" class="input" name="mname" type="text" value="" size="30" /><br />
        </div>

Answer 1

That gap is there, because visibility: hidden; unlike display: none; will keep the occupied space and not free it up. In the perspective of the layout engine, visibility: hidden; does not mean anything, only the rendering engine will not render that part.

Change the <div id="optionyes" style="visibility:hidden" > to <div id="optionyes" style="display:none" >

Answer 2

Because you set the visibility to hidden, and that doesn't remove the element, it just doesn't display it while still occupying the original amount of space.

<div id="optionyes" style="visibility:hidden">

Use display:none if you want it to act like it doesn't exist in the page.