CSS hide element and show it after 5 seconds
CSS Hide an element and show it after 5 seconds
In this article, we’ll show you how to use CSS to hide an element and show it after 5 seconds.
Read more: CSS Tutorial
Hiding Elements with CSS
CSS provides several ways to hide elements, the most common of which are using the display and visibility properties.
Using the display property
The display property controls the display of an element, including showing, hiding, and layout. Display:none; completely hides an element, eliminating its use on the page.
The sample code is as follows:
.hide {
display: none;
}
Using the visibility property
The visibility property controls the visibility of an element, including showing and hiding it. However, hidden elements still take up space on the page.
The sample code is as follows:
.hide {
visibility: hidden;
}
Show element after 5 seconds
To show a hidden element after 5 seconds, we can use the JavaScript setTimeout function.
The sample code is as follows:
<html>
<head>
<style>
.hide {
display: none;
}
</style>
<script>
setTimeout(function() {
document.getElementById("hiddenElement").style.display = "block";
}, 5000);
</script>
</head>
<body>
<div class="hide" id="hiddenElement">
This is a hidden element
</div>
</body>
data-internallinksmanager029f6b8e52c="9" href="https://geek-docs.com/html/html-top-tutorials/1000100_html_index.html" rel="noopener" target="_blank" title="HTML Tutorial">html>
In the above example, we first use the CSS display property to hide the element. Then, we use the JavaScript setTimeout function to set the element’s display property to “block” after 5 seconds to make it visible.
Summary
The CSS display and visibility properties make it easy to hide elements. By combining them with the JavaScript setTimeout function, we can show the hidden element after 5 seconds. This is a simple and practical technique that can be applied to a variety of scenarios where a delayed display of an element is required.