Hide or Show Elements in HTML using Display Property

HTML serves as the foundation for web pages, playing a crucial role in organizing and shaping websites and web applications.

This guide will delve into utilizing the display property in HTML to either conceal or reveal elements.

The display property in CSS controls the visibility of HTML DOM elements by interacting with them using JavaScript or jQuery.

To hide an element on a webpage, the display property can be set to "none."

Example


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

Modify the CSS style display property to "block" in order to visually present an element.

Example


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

Ways to showcase the functionality of the display property:

Generate several div elements, assign them unique identifiers or classes, and proceed to customize their appearance in the following manner:

Example


<div class="rounded" id="rounded"></div>
<div class="circle" id="circle"></div>
<div class="square" id="square"></div>

The dimensions of width and height determine the size of the content. Setting them to 50% will result in a circular shape, while a border-radius of 0% will create a square border. Using 25% for the border-radius will produce a rounded outline. The float property is responsible for positioning the div elements, while margin-right can be used to create space between them on the right side.

Example


<style type="text/css">	
	.rounded {
		
		border-radius: 25%;
		float: left;
                       width: 140px;
		height: 140px;
		margin-right: 60px;
	}
	.circle {

		border-radius: 50%;
		float: left;
                      width: 140px;
		height: 140px;
		margin-right: 60px;
	}	
	.square {
		border-radius: 0%;
		float: left;
                        width: 140px;
		height: 140px;
		margin-right: 60px;
	}

The property background-color is used to define the color of the background of a div element.

Example


#rounded {
			background-color: #F15412;
		}
		#circle {
			background-color: #EB1D36;
		}
		#square {
	                       background-color: #F73D93;   
			       }

The method document.getElementById selects the div element that matches the provided id.

Example


<script type="text/javascript">
		document.getElementById("circle").onclick = function()

By clicking on the div element, setting the style.display property to "none" will make it vanish from the screen.

Example


.style.display = "none";

Application of style.display feature:

Example


<html>
<head>

	<title>ABC....</title>

	<style type="text/css">


		.rounded {
			border-radius: 25%;
			float: left;
                        width: 140px;
		height: 140px;
			margin-right: 50px;
		}
		.circle {
		border-radius: 50%;
		float: left;
                        width: 140px;
		height: 140px;
		margin-right: 60px;
		}
		.square {
		border-radius: 0%;
		float: left; 
                      width: 140px;
		height: 140px;
		margin-right: 60px;
		}
		#rounded {
			background-color: #F15412;
		}
		#circle {
			background-color: #EB1D36;
		}
		#square {
			background-color: #F73D93;
		}
	</style>

</head>

<body>

	<div class="rounded" id="rounded"></div>
	<div class="circle" id="circle"></div>
	<div class="square" id="square"></div>

	<script type="text/javascript">
		document.getElementById("rounded").onclick = function() {

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

		}
		document.getElementById("circle").onclick = function() {

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

		}
		document.getElementById("square").onclick = function() {

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

		}
	</script>

</body>

</html>

Output:

Upon clicking on it, the square form will disappear.

Likewise, when a circular shape is clicked, it disappears.

Likewise, selecting a circular object results in its disappearance.

Input Required