Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Different ways to hide elements using CSS
There are instances when you simply don't want every element of your website to be exposed. In other words, you don't want every template element of a page, post, header, or footer displayed every time it appears. And while it might appear that you need to update the template or theme code each time you want this omission to happen, that's not actually true.
In fact, with only CSS, you may rapidly hide parts of your website. And it's really not that difficult. Let's dive into the article for getting better understanding of the different ways to hide elements using CSS.
Syntax
The general syntax for hiding elements using various CSS properties
/* Method 1: Using display */
selector { display: none; }
/* Method 2: Using visibility */
selector { visibility: hidden; }
/* Method 3: Using opacity */
selector { opacity: 0; }
/* Method 4: Using position */
selector { position: absolute; left: -9999px; }
/* Method 5: Using dimensions */
selector { width: 0; height: 0; overflow: hidden; }
Method 1: Using display: none
The display: none property completely removes the element from the document flow, making it invisible and freeing up its space.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: #4CAF50;
color: white;
text-align: center;
line-height: 100px;
margin: 10px 0;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="box">Visible Box</div>
<div class="box hidden">Hidden Box</div>
<div class="box">Another Visible Box</div>
</body>
</html>
Only two green boxes are visible - the hidden box is completely removed from the layout and takes up no space.
Method 2: Using visibility: hidden
Without altering the document's layout, an element can be displayed or hidden using the CSS visibility attribute. The element remains in the document flow but becomes invisible.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: #FF6B6B;
color: white;
text-align: center;
line-height: 100px;
margin: 10px 0;
}
.invisible {
visibility: hidden;
}
</style>
</head>
<body>
<div class="box">Visible Box</div>
<div class="box invisible">Invisible Box</div>
<div class="box">Another Visible Box</div>
</body>
</html>
Two red boxes are visible with empty space between them where the invisible box still occupies space in the layout.
Method 3: Using opacity
To add a transparency effect to the element, we can utilize the opacity attribute in CSS. We'll use an opacity value of 0 to completely hide or make the element transparent while maintaining its space in the layout.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: #9B59B6;
color: white;
text-align: center;
line-height: 100px;
margin: 10px 0;
transition: opacity 0.3s ease;
}
.transparent {
opacity: 0;
}
</style>
</head>
<body>
<div class="box">Visible Box</div>
<div class="box transparent">Transparent Box</div>
<div class="box">Another Visible Box</div>
</body>
</html>
Two purple boxes are visible with empty space between them where the transparent box is invisible but still occupies layout space.
Method 4: Using position: absolute
When we use the 'position: absolute' attribute in CSS for an element, we can move the element out of the visible area by using positioning properties like left: -9999px.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: #3498DB;
color: white;
text-align: center;
line-height: 100px;
margin: 10px 0;
}
.positioned-hidden {
position: absolute;
left: -9999px;
}
</style>
</head>
<body>
<div class="box">Visible Box</div>
<div class="box positioned-hidden">Hidden Box</div>
<div class="box">Another Visible Box</div>
</body>
</html>
Two blue boxes are visible - the hidden box is positioned far off-screen to the left and is not visible.
Method 5: Using dimensions
This could also be one of the simplest ways to hide any element. We will minimize the dimension of the element using height and width properties. Remember to use the overflow: hidden property so that the entire content of the element is hidden.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: #E74C3C;
color: white;
text-align: center;
line-height: 100px;
margin: 10px 0;
}
.collapsed {
width: 0;
height: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">Visible Box</div>
<div class="box collapsed">Collapsed Box</div>
<div class="box">Another Visible Box</div>
</body>
</html>
Two red boxes are visible with no space between them - the collapsed box has zero dimensions and is completely hidden.
Comparison
| Method | Space in Layout | Clickable | Affects Document Flow |
|---|---|---|---|
display: none |
No | No | Yes |
visibility: hidden |
Yes | No | No |
opacity: 0 |
Yes | Yes | No |
position: absolute |
No | No | Yes |
width/height: 0 |
No | No | No |
Conclusion
CSS provides multiple methods to hide elements, each with different behaviors. Choose display: none for complete removal, visibility: hidden to maintain layout space, or opacity: 0 for smooth transitions while keeping functionality.
357 Views
