156

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?

Improve this question
4
  • 3
    jQuery $(".news").show()? "so the div will shadow"...you mean it will fade out?? Commented Feb 20, 2011 at 19:55
  • Yeah $(".news").show() works! The same $(".news").hide()!!! Thanks ;) Commented Feb 20, 2011 at 19:59
  • 3
    You can condense that down to one statement with $('.news').toggle(); Commented Feb 20, 2011 at 20:10
  • Possible duplicate of How to change css display none or block property using Jquery? Commented Apr 20, 2017 at 15:01

14 Answers 14

Reset to default
274

To hide the div

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

or

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

and to show the div:

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

or

$('.news').css('display','block');
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

$('.news').css('display','block'); worked for me! thanks Shehal!
How do I reset the 'display' style to whatever was set in CSS in the first place and not to 'block'?
Are these aliases?
82

jQuery provides you with:

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

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

Improve this answer

2 Comments

The problem is, .show() does nor remove display: none, but instead put display: block or inline depending on the element, and it can break the layout if the element use an unusual display style.
@lolesque I found a simple 'hack' to fix that issue. Simply use element{display:none;} in your css, but in your js, also use element.hide() at the same time. This will allow the show() function to work.
24

In JavaScript: 

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

In jQuery:

$("#id").css("display","");
Improve this answer

2 Comments

I had to use $("#id").css('display', ''); to make it work properly in removing the inline style for "display"
Me too @TrippinBill (using Mac Firefox 43) - have submitted an edit. These seem to be the only way to remove the CSS property rather than reverse it. This allows it to be overridden by broader CSS assignments, whereas reversing it doesn't.
17

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.

Improve this answer

1 Comment

Good idea to show the toggle function. Many times if you need to click something and show it, you would like the functionality to hide it too.
12

Use toggle to show and hide.

$('#mydiv').toggle()

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

Improve this answer

3 Comments

Note that .toggle() is deprecated since jQuery 1.9.
@TylerH I can't see a note to see it's deprecated?
@Paul Sorry, I was thinking of the toggle event api.jquery.com/toggle-event
12

The only way to remove an inline "display:none" via jQuery's css-api is by resetting it with the empty string (null does NOT work btw!!).

According to the jQuery docu this is the general way to "remove" a once set inline style property.

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

or

$("#mydiv").css({display:""});

should do the trick properly.

IMHO there is a method missing in jQuery that could be called "unhide" or "reveal" which instead of just setting another inline style property unsets the display value properly as described above. Or maybe hide() should store the initial inline value and show() should restore that...

Improve this answer

Comments

10

i'd suggest adding a class to display/hide elements:

.hide { display:none; }

and then use jquery's .toggleClass() to show/hide the element:

$(".news").toggleClass("hide");
Improve this answer

Comments

6

You're not giving us much information but in general this might be a solution:

$("div.news").css("display", "block");
Improve this answer

2 Comments

Which other infos do you need? I think its a simple question, isn't it? Anyway, I resolved by using $(".news").show() and $(".news").hide() ;)
One obious question is: are there more div.news on the page. In which case this would display all of them.
6

jQuery's .show() and .hide() functions are probably your best bet.

Improve this answer

Comments

5

For some reason, toggle didn't work for me, and I received the error uncaught type error toggle is not a function when inspecting the element in browser. So I used the following code and it started working for me.

$(".trigger").click(function () {
    $('.news').attr('style', 'display:none');
})

Used jquery script file jquery-2.1.3.min.js.

Improve this answer

Comments

4

If you have a lot of elements you would like to .hide() or .show(), you are going to waste a lot of resources to do what you want - even if use .hide(0) or .show(0) - the 0 parameter is the duration of the animation.

As opposed to Prototype.js .hide() and .show() methods which only used to manipulate the display attribute of the element, jQuery's implementation is more complex and not recommended for a large number of elements.

In this cases you should probably try .css('display','none') to hide and .css('display','') to show

.css('display','block') should be avoided, especially if you're working with inline elements, table rows (actually any table elements) etc.

Improve this answer

Comments

2

Considering lolesque's comment to best answer you can add either an attribute or a class to show/hide elements with display properties that differs from what it normally has, if your site needs backwards compatibility I would suggest making a class and adding/removing it to show/display the element

.news-show {
display:inline-block;
}

.news-hide {
display:none;
}

Replace inline-block with your preferred display method of your choice and use jquerys addclass https://api.jquery.com/addclass/ and removeclass https://api.jquery.com/removeclass/ instead of show/hide, if backwards compatibility is no problem you can use attributes like this.

.news[data-news-visible=show] {
display:inline-block;
}

.news[data-news-visible=hide] {
display:none;
}

And use jquerys attr() http://api.jquery.com/attr/ to show and hide the element.

Whichever method you prefer it makes you able to easily implement css3 animations when showing/hiding elements this way

Improve this answer

Comments

1

Using show() adds display:block in place of display:hide which might break things.

To avoid that, you can have a class with property display:none and toggle that class for that element with toggleClass().

$("button").on('click', function(event){  $("div").toggleClass("hide"); });
.hide{
   display:none;
}

div{
   width:40px;
   height:40px;
   background:#000;
   margin-bottom:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
<button>Toggle Box</button>

None of the answers mentioned this.

Improve this answer

Comments

0

Here are a few different examples to show and hide using JS:

http://jsfiddle.net/vsLkb8a7/8/

CSS:

<style>
.elem{
    width:300px;
    height:300px;   
}

.divClass1{
    background:red;
}
.divClass2{
    background:blue;
}
.divClass3{
    background:green;
}
.divClass4{
    background:orange;
}
.divClass5{
    background:black;
}
.divClass6{
    background:yellow;
}
.hidemeClass{
  display:none;
}

.showmeClass{
  display:block;
}
</style>

HTML:

<button class="myBtn">show and hide div</button>
<div id="" class="elem divClass1"></div>
<div id="" class="elem divClass2 showmeClass"></div>
<div id="divId" class="elem divClass3"></div>
<div id="" class="elem divClass4"></div>
<div id="" class="elem divClass5"></div>
<div id="" class="elem divClass6"></div>

jS:

jQuery(".myBtn").click(function () {

  //Simple toggle
  jQuery('.divClass1').toggle();
  

  //OR use a toggle between classes. Of course you would have to add: .hidemeClass{display:none;}.showmeClass{display:block;} to your stylesheet and the element should have atleast the default class.
  jQuery('.divClass2').toggleClass('hidemeClass showmeClass');



  //OR let's use a toggle with a case statement
  jQuery(this).toggleClass('hidediv');
  
  if (jQuery(this).hasClass('hidediv')){


    //using Plain Javascript
    const el= document.getElementById("divId");
    el.style = "display:none;"; //display:unset or :initial


    //or using Attr()
    jQuery('.divClass4').attr('style', 'display:none');
    //display:unset or :initial

    //or using css()
    jQuery('.divClass5').css('display','none');
    //display:unset or :initial


    //or using builtin hide()
    jQuery('.divClass6').hide();

  }else{

    //using Plain Javascript
    const el= document.getElementById("divId");
    el.style = "display:block;"; //display:unset or :initial

    //or using Attr()
    jQuery('.divClass4').attr('style', 'display:block'); 
    //display:unset or :initial

    //or using css()
    jQuery('.divClass5').css('display','block');
    //display:unset or :initial


    //or using builtin show()
    jQuery('.divClass6').show();

  }


});
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.