title: Using display:none still produce blank space
body: <p>I'm actually making an app with Cordova for a school project. I use jQuery to hide and show parts of the code, consisting of questions and answers. The problem is that when jQuery hides and shows questions there's blank space between the top of the screen and the displayed text.</p>
  
  <p>Here's what the app shows when all the questions are answered (in French):<a href="https://i.stack.imgur.com/DBpge.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DBpge.jpg" alt="Application with display:none not working as expected"></a></p>
  
  <p>I tried with <code>$('#numero').hide();</code>/<code>$('#numero').show();</code> and <code>$('#numero').css({"display":"none"});</code>/<code>$('#numero').css({"display":"inline"})</code> and the blank space is still visible.</p>
  
  <p>Here's my actual js code:</p>
  
  <pre><code>var bluedata = [];
  var numu = 0;
  var numd = 0;
  var hour = 0;
  
  function sendData() {
    console.log("Sending...");
    bluetoothSerial.write(bluedata);
  }
  
  document.getElementById('btn-add').onclick = function() {
    $('#numeroplus').css({"display":"inline"});
    $('#numero1').css({"display":"inline"});
    $('#numero2').css({"display":"inline"});
    $('#btn-add').css({"display":"none"});
  };
  document.getElementById('btn-suivant').onclick = function() {
    numu = document.getElementById('numero').value;
    numd = document.getElementById('numeroplus').value;
    $('#numeroplus').css({"display":"none"});
    $('#numero').css({"display":"none"});
    $('#numero1').css({"display":"none"});
    $('#numero2').css({"display":"none"});
    $('#numerotel').css({"display":"none"});
    $('#frequencesms').css({"display":"inline"});
    $('#freqhour').css({"display":"inline"});
    $('#btn-add').css({"display":"none"});
    $('#btn-suivant').css({"display":"none"});
    $('#btn-suivant1').css({"display":"inline"});
    bluedata.push(numu);
  
    if (numd.length !== 0) {
      bluedata.push(numd);
    }
  };
  document.getElementById('btn-suivant1').onclick = function() {
    $('#frequencesms').hide();
    $('#freqhour').hide();
    hour = document.getElementById('freqhour').value;
    bluedata.push(hour);
    console.log(bluedata);
    $('#btn-suivant1').hide();
    $('#afterconf').show();
    sendData();
  };
  </code></pre>
  
  <p>And here's my HTML code (I use Materialize to make an Android-like app):</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
      &lt;meta name="format-detection" content="telephone=no"&gt;
      &lt;meta name="msapplication-tap-highlight" content="no"&gt;
      &lt;meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" /&gt;
      &lt;script type="text/javascript" src="cordova.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/bower_components/materialize/dist/css/materialize.css"&gt;
      &lt;script type="text/javascript" src="css/bower_components/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="css/bower_components/materialize/dist/js/materialize.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
      &lt;link rel="icon" href="favicon.ico" /&gt;
      &lt;title&gt;La Piscine de la SIN&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;nav&gt;
    &lt;div class="nav-wrapper"&gt;
      &lt;a class="brand-logo center"&gt;La Piscine&lt;/a&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
   &lt;div class="container"&gt;
  &lt;form class="col s12"&gt;
  &lt;div class="row"&gt;
  &lt;div class="input-field"&gt;
    &lt;input placeholder="Premier numéro" id="numero" type="tel" pattern="^\d{2}-\d{2}-\d{2}-\d{2}-\d{2}$"&gt;&lt;br/&gt;
    &lt;br/&gt;
    &lt;input placeholder="Deuxième numéro" id="numeroplus" style="display: none" type="tel" pattern="^\d{2}-\d{2}-\d{2}-\d{2}-\d{2}$"&gt;&lt;br/&gt;
    &lt;br/&gt;&lt;a id="btn-add"&gt;Ajouter un numéro de téléphone supplémentaire&lt;/a&gt;&lt;br/&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/form&gt;
      &lt;/div&gt;
    &lt;br/&gt;&lt;button type="button" id="btn-suivant" class="btn btn-suivant btn-lg btn-primary"&gt;Suivant&lt;/button&gt;
    &lt;/div&gt;&lt;div class="container"&gt;
  &lt;form class="col s12"&gt;
  &lt;div class="row"&gt;
  &lt;div class="input-field"&gt;
      &lt;p id="frequencesms" style="display: none; text-align: center"&gt;À quelle heure voulez-vous recevoir un SMS sur l'état actuel de la piscine ?&lt;/p&gt;
      &lt;input id="freqhour" style="display: none" type="time"&gt;&lt;br/&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/form&gt;
      &lt;/div&gt;
      &lt;br/&gt;&lt;button type="button" id="btn-suivant1" style="display: none" class="btn btn-suivant btn-lg btn-primary"&gt;Suivant&lt;/button&gt;
    &lt;/div&gt;&lt;div id="afterconf" style="display:none"&gt;
      &lt;h5&gt;Félicitations, votre système d'alertes est maintenant configuré !&lt;/h5&gt;
      &lt;p&gt;Vous communiquerez désormais avec le système en envoyant un SMS au numéro qui vient de vous contacter.&lt;/p&gt;
  
      &lt;h5&gt;Liste des commandes pouvant être envoyées :&lt;/h5&gt;
        &lt;p&gt;HELP&lt;br/&gt;TEMPERATURE&lt;br/&gt;EAU&lt;br/&gt;CHLORE&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
      &lt;script type="text/javascript" src="js/mrtino.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>Any help would be appreciated.</p>
  
  <p>Here is a JSFiddle : <a href="https://jsfiddle.net/o6sx8nuc/" rel="nofollow noreferrer">https://jsfiddle.net/o6sx8nuc/</a></p>