CSS Visibility

CSS visibility allows you to control whether an element is visible or hidden without affecting the layout of the page.

Tutorials dojo strip

Visible

The visibility: visible; property is the default value, meaning the element is visible.

.visible-element {
    visibility: visible;
    background-color: lightgreen;
    padding: 10px;
    margin-bottom: 10px;
}

CSS
​x
 
.visible-element {    visibility: visible;    background-color: lightgreen;    padding: 10px;    margin-bottom: 10px;}

<div class="visible-element">This is a visible element.</div>

HTML
 
<div class="visible-element">This is a visible element.</div>

Hidden

The visibility: hidden; property hides the element, but it still takes up space in the layout.

.hidden-element {
    visibility: hidden;
    background-color: lightcoral;
    padding: 10px;
    margin-bottom: 10px;
}

CSS
 
.hidden-element {    visibility: hidden;    background-color: lightcoral;    padding: 10px;    margin-bottom: 10px;}

<div class="hidden-element">This is a hidden element.</div>

HTML
 
<div class="hidden-element">This is a hidden element.</div>

Collapse

The visibility: collapse; property is used for table rows and columns. The element is hidden and the space it occupied is also removed.

.collapse-element {
    visibility: collapse;
    background-color: lightblue;
    padding: 10px;
    margin-bottom: 10px;
}

CSS
 
.collapse-element {    visibility: collapse;    background-color: lightblue;    padding: 10px;    margin-bottom: 10px;}

<div class="collapse-element">This is a collapsed element.</div>

HTML
 
<div class="collapse-element">This is a collapsed element.</div>

CSS Visibility Example Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Visibility Example</title>
    <style>
        .visible-element {
            visibility: visible;
            background-color: lightgreen;
            padding: 10px;
            margin-bottom: 10px;
        }

        .hidden-element {
            visibility: hidden;
            background-color: lightcoral;
            padding: 10px;
            margin-bottom: 10px;
        }

        .collapse-element {
            visibility: collapse;
            background-color: lightblue;
            padding: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="visible-element">This is a visible element.</div>
    <div class="hidden-element">This is a hidden element.</div>
    <div class="collapse-element">This is a collapsed element.</div>
</body>
</html>

HTML/CSS
 
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>CSS Visibility Example</title>    <style>        .visible-element {            visibility: visible;            background-color: lightgreen;            padding: 10px;            margin-bottom: 10px;        }​        .hidden-element {            visibility: hidden;            background-color: lightcoral;            padding: 10px;            margin-bottom: 10px;        }​        .collapse-element {            visibility: collapse;            background-color: lightblue;            padding: 10px;            margin-bottom: 10px;        }    </style></head><body>    <div class="visible-element">This is a visible element.</div>    <div class="hidden-element">This is a hidden element.</div>    <div class="collapse-element">This is a collapsed element.</div></body></html>

CSS Labs

Tutorials dojo strip