CODEWITHSUNDEEP
jquerycss
Kjensen
Kjensen

Reputation: 12374

Hide div in style - and show it in JQuery?

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?

Upvotes: 0

Views: 1236

Answers (3)

TStamper
TStamper

Reputation: 30364

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>

Upvotes: 1

Tomas Aschan
Tomas Aschan

Reputation: 60584

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>

Upvotes: 5

karim79
karim79

Reputation: 342635

Change your markup to:

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

Upvotes: 4

Related Questions