How can I change CSS display none or block property using jQuery?

Question

score 1138 · Accepted Answer · edited Oct 16 '13 at 12:19

1138

The correct way to do this is to use show and hide:

$('#id').hide();
$('#id').show();

An alternate way is to use the jQuery css method:

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

edited Oct 16 '13 at 12:19

Bernhard Barker

54,589
14
104
138

answered Aug 27 '10 at 08:53

djdd87

67,346
27
156
195

@GenericTypeTea: `#id` used for ids what about if I want to use `class`? – AabinGunz Aug 23 '11 at 12:43
32

`$(".class").css("display", "none");` – djdd87 Aug 23 '11 at 13:02
10

I tried using `$('#id').css('display', 'none');`, but it did not work. However, using `$('#id').css('color', 'red');` does work. I am not sure why, though. Does anyone have any ideas? Thanks in advance. – David Jun 28 '13 at 16:09
@David I tried the exact code $('#id').css('display', 'none'); and it did worked for me, I wonder why it did'nt worked for you. – vishB Sep 08 '14 at 14:08
5

It is also worth to include difference between $('#id').hide() and $("#id").css("display", "none") in this answer. – ManirajSS Sep 16 '14 at 19:20
If you need remove css in class, you need use .removeClass ex. $(".img-responsive").removeClass("display"); – Fabio Duran Verdugo Jul 05 '16 at 17:54
i had the same problem. display:block is worked but i want to set display:normal its not happening here. can someone help me ?. – jaibalaji Oct 26 '17 at 12:13
2

There is a difference between two, where former function hides the text only and doesn't free up a space occupied by an element whereas latter hide the content and free up the space occupied by cocern element – Dila Gurung Oct 18 '18 at 17:10

score 123 · Answer 2 · edited May 06 '20 at 13:56

There are several ways to accomplish this, each with its own intended purpose.

1.) To use inline while simply assigning an element a list of things to do

$('#ele_id').css('display', 'block').animate(....
$('#ele_id').css('display', 'none').animate(....

2.) To use while setting multiple CSS properties

$('#ele_id').css({
    display: 'none'
    height: 100px,
    width: 100px
});
$('#ele_id').css({
    display: 'block'
    height: 100px,
    width: 100px
});

3.) To dynamically call on command

$('#ele_id').show();
$('#ele_id').hide();

4.) To dynamically toggle between block and none, if it's a div

some elements are displayed as inline, inline-block, or table, depending on the Ta g N ame

$('#ele_id').toggle();

score 31 · Answer 3 · answered Aug 27 '10 at 08:54

31

If the display of the div is block by default, you can just use .show() and .hide(), or even simpler, .toggle() to toggle between visibility.

answered Aug 27 '10 at 08:54

reko_t

55,302
10
87
77

True, it will set display to whatever it was initially, which could be block or something different. – danielgwood Aug 27 '10 at 08:56

score 11 · Answer 4 · edited May 06 '20 at 13:57

11

For hide:

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

For show:

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

edited May 06 '20 at 13:57

Peter Mortensen

30,738
21
105
131

answered Apr 06 '16 at 13:21

Phanikumar Jatavallabhula

181
1
8

score 9 · Answer 5 · answered Jul 28 '20 at 16:31

9

In javascript:

document.getElementById("myDIV").style.display = "none";

and in jquery:

$("#myDIV").css({display: "none"});
$("#myDIV").css({display: "block"});

and you can use:

$('#myDIV').hide();
$('#myDIV').show();

answered Jul 28 '20 at 16:31

Mojtaba Nava

858
7
17

score 8 · Answer 6 · edited Jun 10 '14 at 16:30

8

Simple way:

function displayChange(){
$(content_id).click(function(){
  $(elem_id).toggle();}

)}

edited Jun 10 '14 at 16:30

demongolem

9,474
36
90
105

answered Jun 10 '14 at 16:13

user3726824

81
1
1

An explanation would be in order. – Peter Mortensen May 06 '20 at 13:57

score 8 · Answer 7 · answered Feb 29 '12 at 08:05

8

Other way to do it using jQuery CSS method:

$("#id").css({display: "none"});
$("#id").css({display: "block"});

answered Feb 29 '12 at 08:05

Miguel

178
1
1

score 7 · Answer 8 · edited May 06 '20 at 13:59

7

In case you want to hide and show an element, depending on whether it is already visible or not, you can use toggle instead of .hide() and .show()

$('elem').toggle();

edited May 06 '20 at 13:59

Peter Mortensen

30,738
21
105
131

answered Dec 19 '17 at 08:27

Mister Verleg

4,053
5
43
68

score 4 · Answer 9 · answered Mar 15 '22 at 08:52

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

setTimeout(()=>{
  $("#id").css("display", "none");
}, 2000)
$("#id2").css("display", "none");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='id'>Hello World!</div>
<div id='id2'>Hello World 2!</div>

score 3 · Answer 10 · answered Aug 08 '13 at 03:44

(function($){
    $.fn.displayChange = function(fn){
        $this = $(this);
        var state = {};
        state.old = $this.css('display');
        var intervalID = setInterval(function(){
            if( $this.css('display') != state.old ){
                state.change = $this.css('display');
                fn(state);
                state.old = $this.css('display');
            }
        }, 100);        
    }

    $(function(){
        var tag = $('#content');
        tag.displayChange(function(obj){
            console.log(obj);
        });  
    })   
})(jQuery);

An explanation would be in order. – Peter Mortensen May 06 '20 at 13:57 — Peter Mortensen, May 06 '20 at 13:57

score 2 · Answer 11 · edited May 06 '20 at 13:58

2

.hide() does not work in Chrome for me.

This works for hiding:

var pctDOM = jQuery("#vr-preview-progress-content")[0];
pctDOM.hidden = true;

edited May 06 '20 at 13:58

Peter Mortensen

30,738
21
105
131

answered Jun 23 '17 at 14:35

Dimitrios Ververidis

1,118
1
9
33

score 1 · Answer 12 · answered Aug 22 '18 at 04:19

In my case I was doing show / hide elements of a form according to whether an input element was empty or not, so that when hiding the elements the element following the hidden ones was repositioned occupying its space it was necessary to do a float: left of the element of such an element. Even using a plugin as dependsOn it was necessary to use float.

score 1 · Answer 13 · edited May 06 '20 at 13:59

1

Use:

$(#id/.class).show()
$(#id/.class).hide()

This one is the best way.

edited May 06 '20 at 13:59

Peter Mortensen

30,738
21
105
131

answered Apr 30 '20 at 09:50

Saeed Ahmed

88
6

score 1 · Answer 14 · answered Jul 29 '20 at 20:14

1

you can do it by button

<button onclick"document.getElementById('elementid').style.display = 'none or block';">

answered Jul 29 '20 at 20:14

Rony Don

29
2

3

When adding an answer to a nine year old question with 13 existing answers where one of them is the accepted answer it is very important to include an explanation of how and why the answer works and also to point out what new aspect of the question your answer addresses. The supplied code does not work as written and lacks an explanation showing how to customize it. – Jason Aller Jul 29 '20 at 20:48
Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Dima Kozhevin Jul 30 '20 at 06:45
I have downvoted you, not because of the lack of explanation (which I agree with the others here) but because your answer will not work if someone gives the value of "'none or block' ". Plus you have a syntax error in your code. (See, this is why an explanation helps.). Take the time to provide an answer so that it becomes useful to someone reading it. – crafter Mar 30 '23 at 11:34

score 1 · Answer 15 · edited May 06 '20 at 13:57

1

Use this:

$("#id").(":display").val("block");

Or:

$("#id").(":display").val("none");

edited May 06 '20 at 13:57

Peter Mortensen

30,738
21
105
131

answered Mar 03 '12 at 09:54

Trikaldarshiii

11,174
16
67
95

i have problem its not working for me :(. ` Start your journey

– jaibalaji Oct 26 '17 at 11:42

How can I change CSS display none or block property using jQuery?

15 Answers15

Linked

Related