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

Question

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

Answer 1

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

Answer 2

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