Change element's display to none or block with JavaScript/jQuery

This post will discuss how to change an element’s display to none or block using JavaScript and jQuery.

1. Using JavaScript

In pure JavaScript, you can control the rendering of the container elements using the display attribute. Setting the display to none will not render the element or any of its children, and setting it to block, the browser will render the element.

JS

document.getElementById("hide").onclick = function() {

document.getElementById("register").style.display = "none";

}

document.getElementById("show").onclick = function() {

document.getElementById("register").style.display = "block";

}

CSS

form {

padding: 20px;

margin: 10px;

border: 1px solid lightgray;

}

#toggle {

padding: 20px;

margin: 10px;

}

HTML

<html>

<head>

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

</head>

<body>

<label for="email">Email address</label>

</div>

<label for="password">Password</label>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

</body>

</html>

Edit in JSFiddle

2. Using jQuery

In jQuery, you can use the .hide() and .show() methods to hide or show an element. This is demonstrated below:

$(document).ready(function() {

$("#hide").click(function() {

$("#register").hide();

});

$("#show").click(function() {

$("#register").show();

});

Edit in JSFiddle

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

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

});

$("#show").click(function() {

$("#register").css("display", "block");

});

Edit in JSFiddle

That’s all about changing the element’s display to none or block using JavaScript and jQuery.

Change element’s display to none or block with JavaScript/jQuery

1. Using JavaScript

JS

CSS

HTML

2. Using jQuery

Share this: