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
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.
Using position: absolute;
When we use the 'position: absolute' attribute in CSS for an element, it simply signifies that the element's position is fixed to its parent container; if no container is provided, the document body is used as the element's parent container. At this point, we can move the element by using the Top, Bottom, Left, and Right properties. To keep the element out of the document body, we'll employ one of these characteristics.
Example
Following is an example where we are going to use CSS position: absolute to hide the element.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body {
background-color: #D5F5E3;
}
h1 {
font-size: 100px;
color: #DE3163;
position: absolute;
}
p {
color: black;
}
h1.hide {
left: -999px;
}
</style>
</head>
<body>
<p>Click The Buttton To Hide Text</p>
<button id="button">Hide</button>
<div class="textbox">
<h1>WELCOME</h1>
</div>
<script>
$("#button").click(function() {
$("h1").addClass("hide");
});
</script>
</body>
</html>
On running the above code, the output window will pop up, displaying the text along with a button on the webpage. When the user wants to hide the text and clicks on the button, the event gets triggered and hides the text.
Using Opacity
To add a transparency effect to the element, we can simply utilize the opacity attribute in CSS. We'll use an opacity value between 0 and 1, or a percentage between 0% and 100%. However, in this instance, we'll use opacity(0) or opacity(0%) to entirely hide or make the element transparent.
Example
In the following example, we are going to use the opacity to '0' to hide the element.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
h1 {
font-size: 90px;
color: #239B56;
}
p {
color: black;
}
h1.hide {
opacity: 0;
}
</style>
</head>
<body>
<p>Click The Button To Apply Opacity To '0'</p>
<button id="button">Click</button>
<div class="textbox">
<h1>TutorialsPoint</h1>
</div>
<script>
$("#button").click(function() {
$("h1").addClass("hide");
});
</script>
</body>
</html>
On running the above code, the output window will pop up, displaying the text along with a click button on the webpage. When the user clicks the button, the event gets triggered and changes the opacity to '0," which hides the text.
Using Measurements
This could also be one of the simplest ways to hide any element. We will minimize the dimension of the element with the aid of the parameters like height, width, font size, etc. Remember to use the overflow: hidden property when using dimensions to shrink or completely hide an element so that the entire content of the element is hidden.
Example
Consider the following example where we are going to hide the element using CSS
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body {
background-color: #D2B4DE;
}
h1 {
font-size: 100px;
color: #DE3163;
}
p {
color: black;
}
h1.hide {
height: 0px;
width: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<p>Click Button To Reduce It's Dimensions To Zero</p>
<button id="button">Hide</button>
<div>
<h1>HELLO</h1>
</div>
<script>
$("#button").click(function() {
$("h1").addClass("hide");
});
</script>
</body>
</html>
When the above program gets executed it will generate an output consisting of text along with a click button on the webpage. When the user clicks the button the dimensions gets reduced to zero and gets the text hidden.
Using Visibility
Without altering the document's layout, an element can be displayed or hidden using the CSS visibility attribute. A <table> rows or columns can also be hidden using this property. We'll just utilize the visibility: hidden. This is one of the simplest ways to hide the DOM from seeing the HTML element.
Example
In the following example we are going to use the visbility:hidden to hide the element.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
h1.hidden {
visibility: hidden;
}
</style>
</head>
<body style="background-color:#ABEBC6">
<h1>TUTORIALSPOINT</h1>
<h1 class="hidden">The Best E-Way Learning</h1>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</body>
</html>
On running the above code, the output window will pop up, displaying the text on the webpage. But we are unable to view the entire content used in the code because the text that goes under visibility: hidden" has gotten hidden and displays the remaining text on the webpage.
80 Views
