CSS Hide Elements
CSS display: none;
When using display: none; the element is completely hidden from the document flow
and does not take
up any space.
It is commonly used with JavaScript to hide or show elements without deleting and recreating them.
Click to show hidden panel
This panel contains a <div> element, which is hidden by default, with display: none.
We use JavaScript to show it (change it to display: block).
Example
How to use CSS and JavaScript to show a hidden element on a click event:
<style>
#panel {
display:
none;
}
</style>
<script>
function myFunction() {
document.getElementById("panel").style.display = "block";
}
</script>
Try it Yourself »
Example
How to use CSS and JavaScript to toggle between show and hide on a click event:
<style>
#panel {
display:
none;
}
</style>
<script>
function myFunction() {
var x = document.getElementById("panel");
if (x.style.display ===
"none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
Try it Yourself »
Hide an Element - Use display:none or visibility:hidden?
display:none
visibility:hidden
Reset
Hiding an element can be done by setting the
display property to
none.
The element will be hidden, and the page will be displayed as if the element is not
there:
You can also use visibility:hidden; to hide an element.
However, with this property, the element will be hidden, but it will still take up the same space as if it was visible:
CSS Display/Visibility Properties
| Property | Description |
|---|---|
| display | Specifies how an element should be displayed |
| visibility | Specifies whether or not an element should be visible |
