How can I change CSS display none or block property using jQuery?
JqueryJquery SelectorsJquery Problem Overview
How can I change CSS display none or block property using jQuery?
Jquery Solutions
Solution 1 - Jquery
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");
Solution 2 - 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
> $('#ele_id').toggle();
Solution 3 - 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.
Solution 4 - Jquery
For hide:
$("#id").css("display", "none");
For show:
$("#id").css("display", "");
Solution 5 - Jquery
Other way to do it using jQuery CSS method:
$("#id").css({display: "none"});
$("#id").css({display: "block"});
Solution 6 - Jquery
Simple way:
function displayChange(){
$(content_id).click(function(){
$(elem_id).toggle();}
)}
Solution 7 - Jquery
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();
Solution 8 - Jquery
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();
Solution 9 - Jquery
(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);
Solution 10 - Jquery
.hide() does not work in Chrome for me.
This works for hiding:
var pctDOM = jQuery("#vr-preview-progress-content")[0];
pctDOM.hidden = true;
Solution 11 - Jquery
$("#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>
Solution 12 - Jquery
Use this:
$("#id").(":display").val("block");
Or:
$("#id").(":display").val("none");
Solution 13 - Jquery
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.
Solution 14 - Jquery
Use:
$(#id/.class).show()
$(#id/.class).hide()
This one is the best way.
Solution 15 - Jquery
you can do it by button
<button onclick"document.getElementById('elementid').style.display = 'none or block';">