150

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?

starball
  • 20,030
  • 7
  • 43
  • 238
markzzz
  • 47,390
  • 120
  • 299
  • 507

14 Answers14

265

To hide the div

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

or

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

and to show the div:

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

or

$('.news').css('display','block');
nhahtdh
  • 55,989
  • 15
  • 126
  • 162
Snehal Ghumade
  • 2,738
  • 2
  • 15
  • 14
81

jQuery provides you with:

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

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

JCOC611
  • 19,111
  • 14
  • 69
  • 90
  • 43
    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 Jun 16 '14 at 15:57
  • @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. – Jarrod Aug 31 '17 at 01:06
23

In JavaScript: 

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

In jQuery:

$("#id").css("display","");
Chris
  • 5,664
  • 6
  • 44
  • 55
Sergio
  • 1,013
  • 8
  • 8
  • I had to use $("#id").css('display', ''); to make it work properly in removing the inline style for "display" – TrippinBilly Oct 09 '14 at 21:36
  • 1
    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. – Chris May 30 '16 at 16:50
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.

Eli Gundry
  • 282
  • 1
  • 7
  • 1
    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. – user3267755 Nov 05 '14 at 15:07
12

Use toggle to show and hide.

$('#mydiv').toggle()

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

Hussein
  • 42,480
  • 25
  • 113
  • 143
11

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...

shoesel
  • 1,198
  • 8
  • 15
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");
rubiii
  • 6,903
  • 2
  • 38
  • 51
6

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

$("div.news").css("display", "block");
Yorian
  • 2,002
  • 5
  • 34
  • 60
  • 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()` ;) – markzzz Feb 20 '11 at 20:01
  • One obious question is: are there more div.news on the page. In which case this would display all of them. – Yorian Feb 20 '11 at 20:09
6

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

Dave Child
  • 7,573
  • 2
  • 25
  • 37
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.

Malte Schwerhoff
  • 12,684
  • 4
  • 41
  • 71
SRI
  • 190
  • 2
  • 5
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.

ann
  • 576
  • 1
  • 10
  • 19
nmirceac
  • 330
  • 2
  • 7
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

Anders M.
  • 199
  • 2
  • 14
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.

Hackinet
  • 3,252
  • 1
  • 10
  • 22
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();

  }


});
samjco-com
  • 365
  • 5
  • 14