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

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