- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is the difference between visibility:hidden and display:none ?
In CSS, the ‘visibility’ and ‘display’ properties are used to show and hide the HTML element. It can have different values, and about that, we will learn below.
In this tutorial, we will see the difference between the ‘visibility: hidden’ and ‘display: none’ CSS properties.
What is Visibility CSS Property?
In CSS, the ‘visibility’ property is used to control the visibility of the HTML element. Generally, it can have one of two values. One is ‘hidden’, and another is ‘visible’.
When we set ‘visible’ as a value of the ‘visibility,’ it shows the HTML element on the web page, and when we set ‘hidden’ as a value of the HTML element, it hides the HTML element, but it takes a space on the web page. It means it doesn’t remove the HTML element from the web page but hides the html element.
Syntax
Users can follow the syntax below to use the ‘visibility’ property of the CSS.
visibility: visible | hidden
In the above syntax, the ‘visibility’ CSS property takes either a ‘visible’ or ‘hidden’ value.
Example
In the example below, we have a ‘container’ element that contains three child div elements. We have set the ‘visibility: visible’ for the first and third div elements. Furthermore, we have set the ‘visibility: hidden’ for the second div element.
In the output, users can observe that the second div element is not visible but takes a space on the web page.
<html>
<head>
<style>
.container {
height: 100px;
width: 500px;
background-color: blue;
padding: 10px;
display: flex;
justify-content: space-around;
border-radius: 12px;
font-size: 1.2rem;
}
.first,
.second,
.third {
height: 100px;
width: 100px;
background-color: red;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.first, .third { visibility: visible;}
.second {visibility: hidden;}
</style>
</head>
<body>
<h2>Using the <i> visibility: hidden </i> CSS property to hide the HTML element</h2>
<div class = "container">
<div class = "first"> visibility: visible </div>
<div class = "second"> visibility: hidden </div>
<div class = "third"> visibility: visible </div>
</div>
</body>
</html>
Example
The ‘opacity: 0’ is almost similar to the ‘visibility: hidden’ as it also hides the HTML element but takes the space on the web page.
In the example below, the div element contains two sections. When users click the first section, its opacity of it becomes zero. When users click the second section, its visibility becomes ‘hidden’. Both hide the HTML element but takes a space on the web page.
However, the main difference is an element with ‘opacity: 0’ is intractable as you can try to click on it multiple times, and it will show you output multiple times. Still, an element with ‘visibility: hidden’ is not intractable.
<html>
<head>
<style>
.card {
height: 300px;
width: 300px;
background-color: aqua;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.part1,
.part2 {
height: 45%;
width: 100%;
background-color: red;
color: white;
font-size: 2rem;
}
</style>
</head>
<body>
<h2>Using the <i> visibility: hidden and opacity: 0 </i> CSS properties</h2>
<p> Click the below cards to see the result </p>
<div class = "card">
<div class = "part1" onclick = "setOpacity0()"> Opacity : 0 </div>
<div class = "part2" onclick = "setVisibility()">visibility: hidden</div>
</div>
<div id = "output"> </div>
<script>
let section1 = document.querySelector('.part1');
let section2 = document.querySelector('.part2');
let output = document.querySelector('#output');
function setOpacity0() {
section1.style.opacity = 0;
output.innerHTML += 'Opacity : 0 <br>';
}
function setVisibility() {
section2.style.visibility = 'hidden';
output.innerHTML += 'visibility: hidden <br>';
}
</script>
</body>
</html>
What is Display CSS Property?
The ‘display’ CSS property is used to control the display of the HTML element. The display property can take ‘block’, ‘inline’, ‘flex’, ‘none’, etc., such as a value.
When we use the ‘none’ as a value of the display CSS property, it removes the HTML element from the web page.
Syntax
Users can follow the syntax below to use the display: none in CSS.
display: none
Example
In the example below, we have three div elements, like the first. We have set the ‘display: bloc’ for the first and third div elements and ‘display: none’ for the second div element. Users can observe that the output removes the second div from the web page.
<html>
<head>
<style>
.container {
height: 100px;
width: 500px;
background-color: red;
padding: 10px;
display: flex;
border-radius: 12px;
font-size: 1.2rem;
}
.first, .second, .third {
height: 80px;
width: 100px;
background-color: green;
border-radius: 12px;
display: flex;
color: white;
margin: 10px;
}
.first, .third { display: block;}
.second { display: none;}
</style>
</head>
<body>
<h2>Using the <i> display: none </i> CSS property to remove the HTML element</h2>
<div class = "container">
<div class = "first"> display: block </div>
<div class = "second"> display: none </div>
<div class = "third"> display: block </div>
</div>
</body>
</html>
Difference Between Visibility: Hidden and Display: None
The ‘visibility’ and ‘display’ both properties control the HTML element's visibility on the web page. The ‘visibility: hidden’ hides the HTML element in the web page, but it doesn’t remove the element, taking a space on the web page. However, the ‘display: hidden’ CSS property removes the HTML element from the web page and doesn’t take up space on the web page.
Example
In the example below, we have ‘display’ and ‘visible’ div elements. Whenever the user clicks on the ‘display’ div element, it sets the ‘display: none’ for the div element, and another div moves in the center, which users can observe in the output.
Whenever users click on the ‘visible’ div element, it sets the ‘visibility: hidden’ for the div element, and the ‘display’ div doesn’t move, representing that the HTML element with ‘visibility: hidden’ takes space on the web page.
<html>
<head>
<style>
.container {
width: 300px;
height: 120px;
background-color: pink;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
padding: 10px;
}
#visible, #display {
width: 120px;
height: 100px;
margin: 5px;
background-color: lightblue;
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Using the <i> display: none and visibility: hidden </i> CSS properties to check difference between them</h2>
<div class = "container">
<div id = "display"> Click to set display: none </div>
<div id = "visible"> Click to set visibility: hidden </div>
</div>
<br> <br>
<button id="reset"> Reset </button>
<script>
let visible = document.getElementById("visible");
let display = document.getElementById("display");
let reset = document.getElementById("reset");
// Add event listeners to the buttons
visible.addEventListener("click", function () {
visible.style.visibility = "hidden";
});
display.addEventListener("click", function () {
display.style.display = "none";
});
reset.addEventListener("click", function () {
visible.style.visibility = "visible";
display.style.display = "block";
});
</script>
</body>
</html>
Using various examples, users learned the difference between ‘visibility: hidden’ and ‘display: none’ in this tutorial. However, ‘visibility: hidden’ and ‘opacity: 0’ are similar, but the HTML element with ‘opacity: 0’ is intractable, but not with ‘visibility: hidden’.
429 Views
