In this article, you will learn how to hide or show an element in Javascript.
Let’s say you have a div element with id ‘theDIV’.
html
<div id="theDIV">
Hi, I'm a DIV element.
</div>
css
#theDIV {
/* Set the width of element to 100% */
width: 100%;
/* Set the top and bottom padding to 50px, right and left padding to 0px*/
padding: 50px 0;
/* Set the text alignment to the center */
text-align: center;
/* Set the background colour to light green */
background-color: lightgreen;
/* Set the top margin to 20px */
margin-top: 20px;
/* Set the bottom margin to 10px */
margin-bottom: 10px;
}
In order to hide or show an element, you can use the document.getElementById() method and style display property, object.style.display. In this example, you will be using a button to hide or show a div element.
full html
<!-- A div element with id "theDIV" -->
<div id="theDIV">
Hi, I'm a DIV element.
</div>
<!-- A button element with class "button" that will execute "hideOrShow()" function upon clicking -->
<button class="button" onclick="hideOrShow()">
Click Me
</button>
full css
#theDIV {
/* Set the width of element to 100% */
width: 100%;
/* Set the top and bottom padding to 50px, right and left padding to 0px*/
padding: 50px 0;
/* Set the text alignment to the center */
text-align: center;
/* Set the background colour to light green */
background-color: lightgreen;
/* Set the top margin to 20px */
margin-top: 20px;
/* Set the bottom margin to 10px */
margin-bottom: 10px;
}
.button {
/* Display the element as a block element */
display: block;
/* Center the element */
margin: 0 auto;
}
full javascript
// A function that hides or shows a selected element
function hideOrShow() {
// Select the element with id "theDIV"
var x = document.getElementById("theDIV");
// If selected element is hidden
if (x.style.display === "none") {
// Show the hidden element
x.style.display = "block";
// Else if the selected element is shown
} else {
// Hide the element
x.style.display = "none";
}
}
Show the element
Hide the element
Note: The document.getElementById() method functions by getting an element whose id matches the supplied string. The style display property, object.style.display functions by returning or setting the display type of an element.
The post How to Hide or Show Element in Javascript appeared first on CodeSource.io.
Ariessa Norramli | Sciencx (2021-02-20T11:59:32+00:00) How to Hide or Show Element in Javascript. Retrieved from https://www.scien.cx/2021/02/20/how-to-hide-or-show-element-in-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.