CODEWITHSUNDEEP
jqueryjquery-selectors
DEVOPS
DEVOPS

Reputation: 18790

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

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

Upvotes: 556

Views: 1888686

Answers (15)

Sahil Thummar
Sahil Thummar

Reputation: 2490

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

Upvotes: 5

Rony Don
Rony Don

Reputation: 29

you can do it by button

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

Upvotes: 1

Mojtaba Nava
Mojtaba Nava

Reputation: 878

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

Upvotes: 10

Saeed Ahmed
Saeed Ahmed

Reputation: 88

Use:

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

This one is the best way.

Upvotes: 1

Mister Verleg
Mister Verleg

Reputation: 4293

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

Upvotes: 7

Dimitrios Ververidis
Dimitrios Ververidis

Reputation: 1215

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

This works for hiding:

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

Upvotes: 2

Phanikumar Jatavallabhula
Phanikumar Jatavallabhula

Reputation: 181

For hide:

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

For show:

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

Upvotes: 11

Trikaldarshiii
Trikaldarshiii

Reputation: 11314

Use this:

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

Or:

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

Upvotes: 1

SpYk3HH
SpYk3HH

Reputation: 22570

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

Upvotes: 123

user2341112
user2341112

Reputation: 51

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.

Upvotes: 1

user3726824
user3726824

Reputation: 81

Simple way:

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

)}

Upvotes: 8

djdd87
djdd87

Reputation: 68456

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

Upvotes: 1164

Pham
Pham

Reputation: 441

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

Upvotes: 3

Miguel
Miguel

Reputation: 168

Other way to do it using jQuery CSS method:

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

Upvotes: 7

reko_t
reko_t

Reputation: 56430

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.

Upvotes: 31

Related Questions