How to Change CSS display none or block using jQuery

How to Change CSS display none or block using jQuery

Use the jQuery CSS() Method
This post will discuss how to change the display of an element to none or block using JavaScript and jQuery.
This post will discuss how to Change CSS display none or block using JavaScript and jQuery

1. Using jQuery
In jQuery, you can use the .hide() and .show() methods to hide or show an element. It is shown below:

$(document).ready(function() {
$("#hide").click(function() {
$("#id").hide();
});

$("#show").click(function() {
$("#id").show();
});
});

Alternatively, you can use the .css() method to modify the display attribute, which controls the rendering of container elements.

$(document).ready(function() {
$("#hide").click(function() {
$("#id").css("display", "none");
});

$("#show").click(function() {
$("#id").css("display", "block");
});
});

 

OR

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

 

2. Using JavaScript

document.getElementById("hide").onclick = function() {
document.getElementById("id").style.display = "none";
}

document.getElementById("show").onclick = function() {
document.getElementById("id").style.display = "block";
}

It’s all about changing or blocking an element’s display to none using JavaScript and jQuery.

Scroll to Top