Home 〉 CSS Tutorials 〉 CSS Visibility Property Explained with Examples | Learn How Visibility Works in CSS

CSS Visibility Property Explained with Examples | Learn How Visibility Works in CSS !

CSS Visibility Property Explained with Examples | Learn How Visibility Works in CSS !

Want to hide an element but keep its space? The `visibility` property helps you show or hide elements without removing them from the layout. Learn the difference between `visibility: hidden` and `display: none`, and when to use each. It's useful for menus, modals, and tooltips.

Introduction

In CSS, the visibility property is a versatile way to control whether an element is visible or hidden on the page. Unlike the 'display' property, which removes an element from the layout entirely, the visibility property will hide the element but preserve the space it occupies.

Let's dive into the details of the 'visibility' property and explore how you can use it effectively!

Why Use Visibility in CSS?

  • Control visibility of elements without affecting document layout.
  • Preserve layout by keeping space reserved for hidden elements.
  • Useful for showing or hiding content dynamically (e.g., pop-ups, modal windows).

Syntax of CSS Visibility

The syntax for 'visibility' is simple:

Syntax ✍

selector {
visibility: visible | hidden | collapse;
}

Available Values:

  • 'visible': The element is visible (default).
  • 'hidden': The element is hidden but still occupies space in the layout.
  • 'collapse': Used primarily in tables, where the element collapses and doesn't take up any space.

Examples of CSS Visibility Property

1. 'visibility: visible'

The default value, meaning the element is fully visible.

Code : 1 📝

<!DOCTYPE html>
<html>
<body>

<p style="visibility: visible;">This text is visible.</p>
<p>This is a paragraph.</p>

</body>
</html>

output 📌

This text is visible.

This is a paragraph.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Output: The text appears as usual.

2. 'visibility: hidden'

Hides the element but still keeps its space in the layout.

Code : 2 📝

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>
<p style="visibility: hidden;">This text is hidden but still takes up space.</p>
<p>This is a paragraph.</p>

</body>
</html>

output 📌

This is a paragraph.

This text is hidden but still takes up space.

This is a paragraph.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Output: The text is hidden, but the space where it was will remain.
Try the above code with 'display: none;' and see the output.

3. 'visibility: collapse'

Mostly used for table rows or columns, where it removes the element but doesn't affect the rest of the layout.

Code : 3 📝

<!DOCTYPE html>
<html>
<body>

<table>
<tr style="visibility: collapse;">
<td>Collapsed Row</td>
</tr>
<tr>
<td>Visible Row</td>
</tr>
</table>

</body>
</html>

output 📌

Collapsed Row
Visible Row
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Output: The first row disappears but the second row remains unaffected.

Practical Uses of Visibility

  • Hiding Elements Temporarily: Use 'visibility: hidden' for elements that should disappear, but you still want to keep their layout space.
  • Table Layouts: 'visibility: collapse' is often used in tables where you want rows or columns to disappear without affecting the table layout.
  • Interactive UI Elements: Control visibility for elements like menus, popups, or tooltips that appear and disappear based on user interactions.

When Not to Use Visibility

  • Avoid for performance-critical applications: Hiding elements with 'visibility: hidden' still keeps them in the layout, which can impact performance.
  • Responsive Design: For elements that need to be completely removed from the flow (like navigation menus in mobile design), use 'display: none' instead.

Conclusion

The visibility property in CSS is a powerful tool for controlling the visibility of elements while keeping their space in the layout. Use 'visible', 'hidden', and 'collapse' wisely to create cleaner, more dynamic layouts.

  • Use 'visibility: hidden' when you want to hide content but keep its space.
  • Use 'visibility: collapse' for table rows and columns that need to disappear without affecting the overall table layout.

Suggested Posts:

Related Topics:

Frequently Asked Questions (FAQs)

What's the difference between 'visibility: hidden' and 'display: none'?

'visibility: hidden' hides an element but keeps it in the layout. 'display: none' removes the element entirely, including its space.

Can I use 'visibility: hidden' for animations?

Yes, you can animate the 'visibility' property, but it's not as smooth as animating properties like 'opacity'.

When should I use 'visibility: collapse'?

'visibility: collapse' is typically used in tables, where it collapses rows or columns without affecting the table structure.

Is 'visibility: hidden' SEO-friendly?

Yes, search engines can still crawl and index content with 'visibility: hidden'. However, it's best for hiding elements temporarily.

Can 'visibility' be animated in CSS?

While 'visibility' itself can be animated, it is not as smooth as animating other properties like 'opacity'. Consider using 'opacity' for more fluid transitions.

Previous Post Next Post