Hide div in style - and show it in JQuery?

Question

I am trying to hide a div until document is ready - and then display it.

This is what I am trying to do:

<div id='initiallyhidden' style='visibility:hidden'>I am a secret - kinda!</div>

<script>
$(document).ready(function() {
    $("#initiallyhidden").show();
});

</script>

How can I make this work?

Answer 1

Change your markup to:

<div id='initiallyhidden' style='display:none'>I am a secret - kinda!</div>

Answer 2

Use the display: none; css property instead. Also, I put your style separately =)

<div id="initiallyhidden" class="hidden">I am a secret - kinda!</div>

<script>
$(document).ready(function() {
    $("#initiallyhidden").show();
});
</script>

<style type="text/css">
    .hidden { display: none; }
</style>

Answer 3

use display: none instead because it takes the element completely out of play, where as visibility: hidden keeps the element and its flow in place without visually representing its contents.

<div id='initiallyhidden' class='hide'>I am a secret - kinda!</div>

<style type="text/css">
  .hide { display: none; }
</style>