CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Alex M
Alex M

Reputation: 3

Toggle display shows the hidden element for a second

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();
  });
});

Upvotes: 0

Views: 368

Answers (2)

Saumya Rastogi
Saumya Rastogi

Reputation: 13703

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>

Upvotes: 0

Shobhit Srivastava
Shobhit Srivastava

Reputation: 549

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();
  });
});

Upvotes: 2

Related Questions