Hide or show elements in HTML using display property
Style display property is used to hide and show the content of HTML DOM by accessing the DOM element using JavaScript/jQuery.
To hide an element, set the style display property to “none”.
document.getElementById("element").style.display = "none";
To show an element, set the style display property to “block”.
document.getElementById("element").style.display = "block";
-
Steps to show the working of style display property:
- Create some div and assign them an id or class and then add styling to it.
<div class=
"circle"
id=
"circle"
></div>
<div class=
"rounded"
id=
"rounded"
></div>
<div class=
"square"
id=
"square"
></div>
chevron_rightfilter_none -
Width and height will set the width and height of the content, border-radius 0% will make a square border, 50% will make a circle and 25% will make a rounded shape and float will make the divs get positioned, margin-right will make them separated with a space at right.
<style type=
"text/css"
>
.circle {
width: 130px;
height: 130px;
border-radius: 50%;
float: left;
margin-right: 50px;
}
.rounded {
width: 130px;
height: 130px;
border-radius: 25%;
float: left;
margin-right: 50px;
}
.square {
width: 130px;
height: 130px;
border-radius: 0%;
float: left;
margin-right: 50px;
}
chevron_rightfilter_none -
Background-color will set the background color of the div.
#circle {
background-color:
#196F3D;
}
#rounded {
background-color:
#5DADE2;
}
#square {
background-color:
#58D68D;
}
chevron_rightfilter_none - The document.getElementById will select the div with given id.
<script type=
"text/javascript"
>
document.getElementById(
"circle"
).onclick =
function
()
chevron_rightfilter_none - The style.display = "none" will make it disappear when clicked on div.
.style.display =
"none"
;
chevron_rightfilter_none
Implementation of style.display property:
< html > < head > < title >Javascript</ title > < style type = "text/css" > .circle { width: 130px; height: 130px; border-radius: 50%; float: left; margin-right: 50px; } .rounded { width: 130px; height: 130px; border-radius: 25%; float: left; margin-right: 50px; } .square { width: 130px; height: 130px; border-radius: 0%; float: left; margin-right: 50px; } #circle { background-color: #196F3D; } #rounded { background-color: #5DADE2; } #square { background-color: #58D68D; } </ style > </ head > < body > < div class = "circle" id = "circle" ></ div > < div class = "rounded" id = "rounded" ></ div > < div class = "square" id = "square" ></ div > < script type = "text/javascript" > document.getElementById("circle").onclick = function() { document.getElementById("circle").style.display = "none"; } document.getElementById("rounded").onclick = function() { document.getElementById("rounded").style.display = "none"; } document.getElementById("square").onclick = function() { document.getElementById("square").style.display = "none"; } </ script > </ body > </ html > |
chevron_right
filter_none
Output:
Output of the above code is:
Square shape will get disappear after clicking on it:
Similarly Rounded shape will get disappear after clicking on it:
Similarly, Circle shape will get disappear after clicking on it.