{"id":7179,"date":"2021-07-29T13:00:01","date_gmt":"2021-07-29T13:00:01","guid":{"rendered":"https:\/\/www.scmgalaxy.com\/tutorials\/?p=7179"},"modified":"2022-04-13T16:34:32","modified_gmt":"2022-04-13T16:34:32","slug":"how-to-use-visibility-property-in-css","status":"publish","type":"post","link":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-visibility-property-in-css\/","title":{"rendered":"How to use Visibility Property in CSS?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">This property is used to specify whether or not an element is visible. We can set this property to visible (default), hidden or collapse.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">hidden &#8211; <\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The element is invisible not removed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"475\" src=\"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/07\/image-21-1024x475.png\" alt=\"\" class=\"wp-image-7180\" srcset=\"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/07\/image-21-1024x475.png 1024w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/07\/image-21-300x139.png 300w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/07\/image-21-768x356.png 768w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/07\/image-21-1536x712.png 1536w, https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/07\/image-21.png 1645w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">collapse-<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This value is only used for table elements. collapse removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content. If collapse is used on other elements, it will be treated as \u201c<strong>hidden<\/strong>\u201d.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ex:-<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>p { visibility: hidden;}<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/magnusbenoni.com\/content\/images\/2015\/11\/Comparison-4.png\" alt=\"Hiding an Element with CSS: Display vs Visibility vs Opacity | Magnus Benoni\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>This property is used to specify whether or not an element is visible. We can set this property to visible [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[5309],"tags":[5724,5134,5725,5723,5310,5722],"class_list":["post-7179","post","type-post","status-publish","format-standard","hentry","category-css","tag-collapse","tag-css","tag-events","tag-hidden","tag-property","tag-visibility"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to use Visibility Property in CSS? - scmGalaxy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-visibility-property-in-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use Visibility Property in CSS? - scmGalaxy\" \/>\n<meta property=\"og:description\" content=\"This property is used to specify whether or not an element is visible. We can set this property to visible [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-visibility-property-in-css\/\" \/>\n<meta property=\"og:site_name\" content=\"scmGalaxy\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-29T13:00:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-13T16:34:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/07\/image-21-1024x475.png\" \/>\n<meta name=\"author\" content=\"rajeshkumar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"rajeshkumar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-use-visibility-property-in-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-use-visibility-property-in-css\\\/\"},\"author\":{\"name\":\"rajeshkumar\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/a40e0dd38feee7c2779460a804d49361\"},\"headline\":\"How to use Visibility Property in CSS?\",\"datePublished\":\"2021-07-29T13:00:01+00:00\",\"dateModified\":\"2022-04-13T16:34:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-use-visibility-property-in-css\\\/\"},\"wordCount\":95,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-use-visibility-property-in-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/image-21-1024x475.png\",\"keywords\":[\"collapse\",\"css\",\"events\",\"hidden\",\"property\",\"visibility\"],\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-use-visibility-property-in-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-use-visibility-property-in-css\\\/\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-use-visibility-property-in-css\\\/\",\"name\":\"How to use Visibility Property in CSS? - scmGalaxy\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-use-visibility-property-in-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-use-visibility-property-in-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/image-21-1024x475.png\",\"datePublished\":\"2021-07-29T13:00:01+00:00\",\"dateModified\":\"2022-04-13T16:34:32+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/a40e0dd38feee7c2779460a804d49361\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-use-visibility-property-in-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-use-visibility-property-in-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-use-visibility-property-in-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/image-21.png\",\"contentUrl\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/image-21.png\",\"width\":1645,\"height\":763},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-use-visibility-property-in-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use Visibility Property in CSS?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#website\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/\",\"name\":\"scmGalaxy\",\"description\":\"A Platform for Software Engineers\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/a40e0dd38feee7c2779460a804d49361\",\"name\":\"rajeshkumar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g\",\"caption\":\"rajeshkumar\"},\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/author\\\/rajeshkumar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to use Visibility Property in CSS? - scmGalaxy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-visibility-property-in-css\/","og_locale":"en_US","og_type":"article","og_title":"How to use Visibility Property in CSS? - scmGalaxy","og_description":"This property is used to specify whether or not an element is visible. We can set this property to visible [&hellip;]","og_url":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-visibility-property-in-css\/","og_site_name":"scmGalaxy","article_published_time":"2021-07-29T13:00:01+00:00","article_modified_time":"2022-04-13T16:34:32+00:00","og_image":[{"url":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/07\/image-21-1024x475.png","type":"","width":"","height":""}],"author":"rajeshkumar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"rajeshkumar","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-visibility-property-in-css\/#article","isPartOf":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-visibility-property-in-css\/"},"author":{"name":"rajeshkumar","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/a40e0dd38feee7c2779460a804d49361"},"headline":"How to use Visibility Property in CSS?","datePublished":"2021-07-29T13:00:01+00:00","dateModified":"2022-04-13T16:34:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-visibility-property-in-css\/"},"wordCount":95,"commentCount":0,"image":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-visibility-property-in-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/07\/image-21-1024x475.png","keywords":["collapse","css","events","hidden","property","visibility"],"articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-visibility-property-in-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-visibility-property-in-css\/","url":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-visibility-property-in-css\/","name":"How to use Visibility Property in CSS? - scmGalaxy","isPartOf":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-visibility-property-in-css\/#primaryimage"},"image":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-visibility-property-in-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/07\/image-21-1024x475.png","datePublished":"2021-07-29T13:00:01+00:00","dateModified":"2022-04-13T16:34:32+00:00","author":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/a40e0dd38feee7c2779460a804d49361"},"breadcrumb":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-visibility-property-in-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-visibility-property-in-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-visibility-property-in-css\/#primaryimage","url":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/07\/image-21.png","contentUrl":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/07\/image-21.png","width":1645,"height":763},{"@type":"BreadcrumbList","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-use-visibility-property-in-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.scmgalaxy.com\/tutorials\/"},{"@type":"ListItem","position":2,"name":"How to use Visibility Property in CSS?"}]},{"@type":"WebSite","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#website","url":"https:\/\/www.scmgalaxy.com\/tutorials\/","name":"scmGalaxy","description":"A Platform for Software Engineers","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.scmgalaxy.com\/tutorials\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/a40e0dd38feee7c2779460a804d49361","name":"rajeshkumar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g","caption":"rajeshkumar"},"url":"https:\/\/www.scmgalaxy.com\/tutorials\/author\/rajeshkumar\/"}]}},"_links":{"self":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/7179","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/comments?post=7179"}],"version-history":[{"count":1,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/7179\/revisions"}],"predecessor-version":[{"id":7181,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/7179\/revisions\/7181"}],"wp:attachment":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/media?parent=7179"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/categories?post=7179"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/tags?post=7179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}