557

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

Improve this question

15 Answers 15

Reset to default
1167

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");
Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

@GenericTypeTea: #id used for ids what about if I want to use class?
$(".class").css("display", "none");
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.
It is also worth to include difference between $('#id').hide() and $("#id").css("display", "none") in this answer.
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
|
123
+25

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 Tag Name

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

Improve this answer

Comments

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.

Improve this answer

1 Comment

True, it will set display to whatever it was initially, which could be block or something different.
12

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();
Improve this answer

Comments

11

For hide:

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

For show:

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

Comments

8

Simple way:

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

)}
Improve this answer

1 Comment

An explanation would be in order.
7

Other way to do it using jQuery CSS method:

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

Comments

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();
Improve this answer

Comments

5

$("#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>

Improve this answer

Comments

3 
(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);
Improve this answer

1 Comment

An explanation would be in order.
2

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

This works for hiding:

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

Comments

2

Use:

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

This one is the best way.

Improve this answer

Comments

1

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.

Improve this answer

Comments

1

Use this:

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

Or:

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

1 Comment

i have problem its not working for me :(. <style> #choosepath { display: none; } </style> <script> $(document).ready(function () { $('#btn_journey').click(function () { alert("button click"); $('#choosepath').css({"display":"normal"}); }); }); </script> </head> <body> <a href="#" class="btn btn-primary btn-lg" id="btn_journey">Start your journey</a> <div class="col-lg-3 col-md-6 mb-4" id="choosepath"> </div> </body></html>
1

you can do it by button

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

Improve this answer

3 Comments

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.