CSS Visibility
Last updated
Last updated
By
The visibility
property in CSS controls whether an element is visible or hidden on a webpage. Unlike the display
property, which removes the element from the document flow, the visibility
property allows you to hide an element while still preserving its space in the layout. This tutorial will explore the different values of the visibility
property, explain how they work, and provide practical examples.
What is the CSS Visibility Property?
Visibility vs Display: Key Differences
CSS Visibility Property Values
Visible
Hidden
Collapse
Practical Examples
Example 1: Using Visibility to Toggle Content
Example 2: Preserving Space with Visibility
Example 3: Using Visibility with JavaScript
Advanced Techniques with Visibility
Accessibility Considerations
Animating Visibility
Conclusion
The visibility
property in CSS determines whether an element is visible or hidden on the webpage. However, unlike display: none
, which removes the element from the document flow, visibility: hidden
hides the element but still takes up the same space on the page.
Syntax:
Common Values:
visible
hidden
collapse
(used primarily for table elements)
The visibility
and display
properties both affect how an element appears on the page, but they work in different ways:
Visibility:
visibility: hidden
hides the element but preserves its space in the layout.
The element remains in the document flow, meaning other elements are not reflowed or repositioned.
Display:
display: none
removes the element from the document flow entirely.
The element takes up no space, and surrounding elements are reflowed to fill the gap.
Key Takeaway: Use visibility
when you want to hide an element without affecting the layout, and use display
when you want to remove the element from the layout entirely.
The visibility
property has three primary values that control how an element is displayed.
visible
is the default value of the visibility
property. When set to visible
, the element is fully rendered on the page.
Example:
Behavior:
The element is fully visible and takes up space in the layout.
Use Cases:
The default behavior for most elements, ensuring they are visible on the page.
hidden
hides the element from view but still preserves its space in the document flow. The element is not rendered, but it still affects the layout as if it were visible.
Example:
Behavior:
The element is hidden but still takes up space in the layout.
Use Cases:
Temporarily hiding content without causing layout shifts or reflows.
Maintaining the structure of a layout when elements are conditionally shown or hidden.
The collapse
value is used primarily for table rows and columns. When set to collapse
, the row or column is removed from the layout, similar to display: none
. For other elements, collapse
behaves the same as hidden
.
Example:
Behavior:
For table rows or columns, the element is removed from the layout.
For other elements, it behaves like visibility: hidden
.
Use Cases:
Collapsing table rows or columns while preserving the overall table structure.
Let's explore some practical examples of how to use the visibility
property effectively.
Explanation:
The content starts hidden, but clicking the button toggles its visibility without affecting the layout.
Explanation:
Box 2 is hidden, but it still takes up space between Box 1 and Box 3, preserving the layout.
Explanation:
The message is initially hidden, but clicking the button reveals it without altering the layout of the page.
Beyond the basics, the visibility
property can be used in more advanced ways to enhance the user experience and accessibility of a webpage.
When hiding content with visibility: hidden
, it’s important to consider accessibility:
Screen Readers: Some screen readers may still announce elements with visibility: hidden
. To ensure content is truly hidden from assistive technologies, consider using aria-hidden="true"
in conjunction with visibility: hidden
.
Example:
Explanation:
The aria-hidden="true"
attribute ensures that the hidden content is not announced by screen readers.
While you cannot directly animate the visibility
property, you can create similar effects by combining it with other properties like opacity
and transition
.
Example:
Explanation:
The content fades in smoothly when the visible
class is added, creating a visually appealing transition.
The visibility
property in CSS is a versatile tool for controlling the visibility of elements on a webpage without altering the layout. By understanding the differences between visibility
and display
, you can choose the right approach for your design needs. Whether you’re hiding content temporarily, preserving layout space, or creating advanced animations, the visibility
property offers a range of possibilities.
Visible: The element is visible and takes up space.
Hidden: The element is hidden but still occupies its space in the layout.
Collapse: Primarily for table elements, removing them from the layout.
By mastering these concepts, you can create more dynamic and user-friendly web designs.
For more tutorials and insights, visit .