CODEWITHSUNDEEP
jquerycss
markzzz
markzzz

Reputation: 47995

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?

Upvotes: 155

Views: 789705

Answers (14)

samjco-com
samjco-com

Reputation: 409

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();

  }


});

Upvotes: 0

SRI
SRI

Reputation: 300

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.

Upvotes: 5

Hackinet
Hackinet

Reputation: 3338

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.

Upvotes: 1

Sergio
Sergio

Reputation: 1043

In JavaScript: 

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

In jQuery:

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

Upvotes: 24

nmirceac
nmirceac

Reputation: 330

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.

Upvotes: 4

Anders M.
Anders M.

Reputation: 199

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

Upvotes: 2

shoesel
shoesel

Reputation: 1248

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

Upvotes: 12

Snehal Ghumade
Snehal Ghumade

Reputation: 2818

To hide the div

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

or

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

and to show the div:

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

or

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

Upvotes: 273

Eli Gundry
Eli Gundry

Reputation: 282

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.

Upvotes: 17

Hussein
Hussein

Reputation: 42818

Use toggle to show and hide.

$('#mydiv').toggle()

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

Upvotes: 12

JCOC611
JCOC611

Reputation: 19729

jQuery provides you with:

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

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

Upvotes: 82

rubiii
rubiii

Reputation: 6983

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");

Upvotes: 10

Dave Child
Dave Child

Reputation: 7901

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

Upvotes: 6

Yorian
Yorian

Reputation: 2062

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

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

Upvotes: 6

Related Questions