how to change css style from jquery

Question

my style is here

#mybox{
display:none;
}

my web is here

<div id='mybox'>
...
</div>


<script type='text/javascript'>
  $(document).ready(function(){
   $("#mybox").css("display","visible");
})
</script>

mybox don't show. How to show mybox ?

Answer 1

use $("#mybox").show() or $("#mybox").css("display","block");

Answer 2

It is display: block in stead of display visible:

<div id='mybox'>
...
</div>


<script type='text/javascript'>
  $(document).ready(function(){
   $("#mybox").css("display","block");
})
</script>

Answer 3

$('#mybox').show();

or

$('#mybox').slideDown();

Answer 4

Firstly, "visible" isn't a valid value for the display attribute. Something like "block" or "inline" is. Secondly, don't set CSS directly like this. It's problematic. Instead use the jQuery effects for showing and hiding things (show/hide/toggle, slideUp/slideDown, fadeIn/fadeOut, etc):

$(function() {
  $("#mybox").show();
});

or alternatively use a class:

$(function() {
  $("#mybox").toggleClass("visible");
});

with:

div.visible { display: block; }

Answer 5

If you use the CSS with display:none; on an element you can trigger .show() and .hide() with jQuery on it! This is a jQuery default feature.