Toggle display shows the hidden element for a second

Question

I'm trying to show a hidden text on click of a button. But when I load the page, the text shows for a second and then disappears. Why would that happen?

<div class="container">
  <p class="temp">This is temporary</p>
  <button id="showme">Show</button>
</div>

$(document).ready(function() {
  $(".temp").hide();
  $("#showme").on("click", function() {
    $(".temp").show();
  });
});

Answer 1

Try to understand how the webpage loads. Your jquery is executed when the entire page is rendered with the associated CSS. So the browser displays your text for a second till it executes jquery to hide that text. So your browser needs to know that this text is hidden while parsing the html. You can do this by giving a CSS style to the text.

CSS:

.temp {
  display: none;
}

HTML:

<div class="container">
  <p class="temp">This is temporary</p>
  <button id="showme">Show</button>
</div>

JS:

$(document).ready(function() {
  $("#showme").on("click", function() {
    $(".temp").show();
  });
});

Answer 2

You should use inline style tag in <p> tag like this:

<p class="temp" style="display: none;">This is temporary</p>

instead of hiding it from jQuery!

 $(document).ready(function() { $("#showme").on("click", function() { $(".temp").show(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <p class="temp" style="display: none;">This is temporary</p> <button id="showme">Show</button> </div>