CSS visibility Property

February 10, 2021 12:37 pm IST

You are Here:

CSS clear Property

CSS visibility property shows or hides an element without changing the layout of a document.

Note: This property can also hide rows or columns in a <table>.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> p{ visibility: hidden; } </style> </head> <body> <h1>CSS visibility Property</h1> <p>This paragraph is hidden.</p> </body> </html>

Run

Syntax

Using CSS

element{ visibility: hidden; }

Using Javascript

object.style.visibility="visible";

Animatable

No, visibility property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS visibility property is visible.

Property Value

The following table provides a list of values for CSS visibiltiy property.

Value	Explanation
visible	The element is visible.
hidden	The element is hidden, but still takes up space

Using JavaScript

In the following example, we will demonstrate how to change the CSS visibility property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <body> <h1>CSS visibility Property</h1> <p>This is a paragraph.</p> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("p")[0]; function myFunction(){ x.style.visibility = "hidden"; } </script> </body> </html>

Run