Flash cards
Review the key moves
What is the main idea behind CSS Hide Elements?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
<___> #panel {Put the learning moves in the order that makes the concept easiest to apply.
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
<style> #panel {
display: none;
}
</style> <script> function myFunction() {
document.getElementById("panel").style.display = "block";
}
</script>Live preview
Example
<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>Live preview
Hide an Element - Use display:none or visibility:hidden?
display:none
Remove
visibility:hidden
Hide
Reset
Reset All
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:
Example
h1.hidden {
display: none;
}Live preview
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:
Example
h1.hidden {
visibility: hidden;
}Live preview
CSS Display/Visibility Properties
| Property | Description |
|---|---|
| display | Specifies how an element should be displayed |
| visibility | Specifies whether or not an element should be visible |