Submit button float up in function by a condition

Question

I have a form that haves a condition that sounds like that: If the client choose YES another form will appear, if is choosing NO, he can submit the form. But if he choose NO, the SUBMIT button stay down and it can be a little bit tricky. So, the question it is, what condition I have to put in that way that the submit button comes closer when the NO answer is choose?

Here is the part of the html code where the condition it is:

<div id="ifYes" style="visibility:hidden">
    <div class="col-md-12 padding-top-10">
      <h1 span style="color:red">If you need visa, please complete the following data:</h1></br>        
    </div>
    <label for="firstName" class="control-label">Full name(as written in the passaport):</label>
    <div class="form-group">
        <div class="col-md-6 padding-top-10">
            <input type="text" class="form-control" required data-parsley-pattern="^[a-zA-Z ]+$" data-parsley-trigger="keyup" id="firstName" placeholder="First"  />
        </div>
        <div class="col-md-6 padding-top-10">
            <input type="text" class="form-control" required data-parsley-pattern="^[a-zA-Z ]+$" data-parsley-trigger="keyup" id="lastName" placeholder="Last"/>
         </div>
    </div>

And here is the JS function:

function yesnoCheck() {
     if (document.getElementById('yesCheck').checked) {
         document.getElementById('ifYes').style.visibility = 'visible';
     } else  {
         document.getElementById('ifYes').style.visibility = 'hidden';
     }
 }

Answer 1

Use display to show/hide the "form"

What is the difference between visibility:hidden and display:none?

function yesnoCheck() {
  if (document.getElementById('yesCheck').checked) {
    document.getElementById('ifYes').style.display = 'block';
  } else {
    document.getElementById('ifYes').style.display = 'none';
  }
}

form {
  border: solid 1px black;
}

<form>
  <div>
    <input type="checkbox" id="yesCheck" onchange="yesnoCheck()" />
  </div>
  <div>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
  <div id="ifYes" style="display:none">
    <div class="col-md-12 padding-top-10">
      <h1 span style="color:red">If you need visa, please complete the following data:</h1>
      <br />
    </div>
    <label for="firstName" class="control-label">Full name(as written in the passaport):</label>
    <div class="form-group">
      <div class="col-md-6 padding-top-10">
        <input type="text" class="form-control" required data-parsley-pattern="^[a-zA-Z ]+$" data-parsley-trigger="keyup" id="firstName" placeholder="First" />
      </div>
      <div class="col-md-6 padding-top-10">
        <input type="text" class="form-control" required data-parsley-pattern="^[a-zA-Z ]+$" data-parsley-trigger="keyup" id="lastName" placeholder="Last" />
      </div>
    </div>
  </div>
</form>