CSS: Visibility - Specifying Element Visibility

The visibility property in CSS is used to control the visibility of elements on a webpage. This property determines whether an element is visible or hidden, without removing it from the document layout. This can be particularly useful when you need to show or hide content dynamically while maintaining the space it occupies in the layout.

Understanding the visibility property and its values is essential for creating interactive and user-friendly web designs. This property allows you to manage the display of elements in a way that can enhance user experience by showing or hiding elements based on user interactions or other conditions.

Table of Contents

Understanding the `visibility` Property

The visibility property specifies whether an element is visible or not. Unlike display: none, which removes the element from the document flow, visibility: hidden keeps the element in the flow but makes it invisible. This distinction is important for maintaining the layout structure while controlling the visibility of elements.

Basic Concept

The visibility property helps in scenarios where you want to hide elements temporarily but retain their space in the layout. It can be useful for creating effects or interactions where elements need to be toggled without affecting the surrounding content.

Syntax and Values

The syntax for the visibility property is straightforward:

.element {
    visibility: value;
}

Available Values

visible: The default value, making the element visible.
hidden: Hides the element, but it still takes up space in the layout.
collapse: For table rows, columns, and column groups, this value hides the element and removes it from the table layout. For other elements, it behaves like hidden.
initial: Sets the property to its default value.
inherit: Inherits the visibility property from its parent element.

Practical Examples

Example 1: Hiding Elements

In this example, we will hide an element using the visibility: hidden property.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Visibility Example</title>

    <style>

        .hidden-element {
            visibility: hidden;
        }

    </style>

</head>
<body>

    <p>This is a visible paragraph.</p>
    <p class="hidden-element">This paragraph is hidden.</p>

</body>
</html>

In this code, the .hidden-element class is applied to a paragraph element. By setting visibility: hidden, the paragraph is hidden from view but still occupies space in the layout. This can be useful for temporarily hiding elements while preserving the overall layout structure.

Example 2: Using `visibility: hidden` vs `display: none`

Next, let’s compare visibility: hidden and display: none to understand their differences.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Visibility vs Display</title>

    <style>

        .hidden {
            visibility: hidden;
        }

        .none {
            display: none;
        }

    </style>

</head>
<body>

    <p>This is a visible paragraph.</p>

    <p class="hidden">This paragraph is hidden with visibility: hidden.</p>

    <p class="none">This paragraph is hidden with display: none.</p>

</body>
</html>

In this example, the .hidden class uses visibility: hidden, while the .none class uses display: none. The paragraph with visibility: hidden is hidden but still takes up space in the layout, whereas the paragraph with display: none is removed from the document flow, not affecting the layout.

Example 3: Controlling Visibility with JavaScript

Finally, let’s control the visibility of elements dynamically using JavaScript.

Understanding the visibility Property