CODEWITHSUNDEEP
jquery
ebattulga
ebattulga

Reputation: 10981

how to change css style from jquery

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 ?

Upvotes: 1

Views: 286

Answers (5)

cletus
cletus

Reputation: 625017

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

Upvotes: 0

powtac
powtac

Reputation: 41040

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.

Upvotes: 1

Corey Ballou
Corey Ballou

Reputation: 43457

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

or 

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

Upvotes: 3

Ikke
Ikke

Reputation: 101221

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>

Upvotes: 2

jantimon
jantimon

Reputation: 38142

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

Upvotes: 5

Related Questions