---
title: "CSS – Visibility"  
description: "CSS provides a visibility property which is allow hiding a DOM elements form view. We can use this property along with JavaScript to create very compl"  
author: "Vijay Shukla"  
published: 2012-12-27  
updated: 2014-09-18  
canonical: https://www.mindstick.com/blog/414/css-visibility  
category: "css-css3"  
tags: ["css-css3"]  
reading_time: 1 minute  

---

# CSS – Visibility

In this blog I [am trying](https://answers.mindstick.com/qa/36834/which-two-programming-languages-should-i-master-in-if-i-am-trying-to-get-into-google-or-facebook) to explaining the [Visibility](https://www.mindstick.com/blog/301300/how-to-improve-your-visibility-in-zero-click-search-results) [property](https://www.mindstick.com/blog/205/property-notification-in-c-sharp) using [CSS3](https://www.mindstick.com/articles/1534/stylish-css3-progress-bars).\

CSS3 provides a visibility property which is allow hiding a DOM [elements](https://www.mindstick.com/forum/1440/wpf-button-with-multiple-text-elements) form view. We can use this property along with [JavaScript](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-javascript) to create very complicated menu and very complicated webpage layouts.

##### Visibility property has three values:

1. Visible.

2. Hidden.

3. Collapse.

##### Visible:

The box and its contents are shown to the user.

##### Example:

```
<p style="visibility:visible;">
This paragraph will be visible.</p>
```

##### Hidden:

The box and its [content](https://www.mindstick.com/articles/13019/get-the-best-content-marketing-pricing-packages-for-your-brand) are made invisible, albeit they still impress the [layout](https://www.mindstick.com/articles/12853/android-layout-and-its-type) of the page.

##### Example:

```
<p style="visibility:hidden;">This paragraph doesn’t visible.</p>
```

##### Collapse:

Its use only for the [dynamic columns](https://www.mindstick.com/articles/1511/pivot-with-dynamic-columns-in-sql-server) and row effects.

##### Example:

```
<table></td><td style="visibility:collapse">This td will be collapse.</td></tr></table>
```

---

Original Source: https://www.mindstick.com/blog/414/css-visibility

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.