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

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.

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

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