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

Viewed 1681110

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

16 Answers

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

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

Use this:

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

Or:

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

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.

Use:

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

This one is the best way.

you can do it by button

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

// Disable #x

$("#x").prop("disabled", true);

// Enable #x

$("#x").prop("disabled", false);
Related