jQuery & CSS - Remove/Add display:none

I have a div with this class :

.news{
  width:710px; 
  float:left;
  border-bottom:1px #000000 solid;
  font-weight:bold;
  display:none;
}

And I'd like with some jQuery methods remove that display:none; (so the div will showed) and than add it again (so the div will shadow).

How can I do it? Cheers

Solution 1:

To hide the div

$('.news').hide();

or

$('.news').css('display','none');

and to show the div:

$('.news').show();

or

$('.news').css('display','block');

Solution 2:

jQuery provides you with:

$(".news").hide();
$(".news").show();

You can then easily show and hide the element(s).

Solution 3:

In JavaScript:

getElementById("id").style.display = null;

In jQuery:

$("#id").css("display","");

Solution 4:

So, let me give you sample code:

<div class="news">
Blah, blah, blah. I'm hidden.
</div>

<a class="trigger">Hide/Show News</a>

The link will be the trigger to show the div when clicked. So your Javascript will be:

$('.trigger').click(function() {
   $('.news').toggle();
});

You're almost always better off letting jQuery handle the styling for hiding and showing elements.

Edit: I see people above are recommending using .show and .hide for this. .toggle allows you to do both with just one effect. So that's cool.

Solution 5:

Use toggle to show and hide.

$('#mydiv').toggle()

Check working example at http://jsfiddle.net/jNqTa/