{"id":512,"date":"2022-05-25T10:18:22","date_gmt":"2022-05-25T10:18:22","guid":{"rendered":"https:\/\/gyanipandit.com\/programming\/?p=512"},"modified":"2023-03-28T12:23:11","modified_gmt":"2023-03-28T12:23:11","slug":"css-visibility","status":"publish","type":"post","link":"https:\/\/gyanipandit.com\/programming\/css-visibility\/","title":{"rendered":"CSS Visibility"},"content":{"rendered":"\n<p class=\"has-text-align-center\"><strong>CSS Visibility Property<\/strong><\/p>\n\n\n\n<p>As the name suggests, visibility is a property with which we can decide whether to show the element or hide the element, without changing the layout of the document. This means that even if you hide the element, it will occupy the space it takes.<\/p>\n\n\n\n<p>If you did not understand it fully, don\u2019t worry, we are going to take some examples over here, so you can get a clear idea of this.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"CSS Visibility Property | Lecture 30 | CSS for Beginners\" width=\"696\" height=\"392\" src=\"https:\/\/www.youtube.com\/embed\/J5UXLi41GZo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>The first thing is that visibility is a property, so we need to identify what are the values that we can have for this property. This property basically has three values, namely \u2013 visible, hidden, and collapse. Now let&#8217;s understand what these values do, one by one.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>visibility:visible; \u00e0 As the name says, if you set visibility property to the value visible, then the element is visible as it is.<\/li>\n\n\n\n<li>visibility:hidden; \u00e0 if you set visibility property to hidden, then the element will not be visible, but it will still occupy the space it requires. This is like hiding the text without disturbing the other elements. Just as if we are making the opacity of that element to 0.<\/li>\n\n\n\n<li>visibility:collapse; \u00e0 This property is used with tables, to hide the table row or data cells.<\/li>\n<\/ul>\n\n\n\n<p>Now, let&#8217;s have an example to understand the visibility property &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"513\" height=\"385\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Visibility.jpg\" alt=\"\" class=\"wp-image-513\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Visibility.jpg 513w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Visibility-300x225.jpg 300w\" sizes=\"auto, (max-width: 513px) 100vw, 513px\" \/><\/figure>\n<\/div>\n\n\n<p>In the above code, we are having two divs, with two IDs, visible and hidden. Basically, the one with the id hidden is going to be hidden, and then another one is going to be visible. Now, let&#8217;s have a look at the output &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1023\" height=\"124\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Visibility-1.jpg\" alt=\"\" class=\"wp-image-514\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Visibility-1.jpg 1023w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Visibility-1-300x36.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Visibility-1-768x93.jpg 768w\" sizes=\"auto, (max-width: 1023px) 100vw, 1023px\" \/><\/figure>\n<\/div>\n\n\n<p>As you can see, the hidden div has still occupied the space that it requires. If you want to also get rid of the space that it takes, you can use the display property and set its value to none, in case that is what you require.<\/p>\n\n\n\n<p>The other value of visibility property, which is collapse, has different effects on different elements.<\/p>\n\n\n\n<p>If the collapse value is used for the table, let&#8217;s say for a row inside the table, the row is going to be hidden completely. Let&#8217;s have a look now.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"419\" height=\"437\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Visibility-2.jpg\" alt=\"\" class=\"wp-image-515\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Visibility-2.jpg 419w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Visibility-2-288x300.jpg 288w\" sizes=\"auto, (max-width: 419px) 100vw, 419px\" \/><\/figure>\n<\/div>\n\n\n<p><br>In the above code, we can see that there is a table, with three rows, and two columns. The second row has an id collapse. In the CSS, we have written the visibility property and the value is collapsed. This will just hide that row completely as if it weren&#8217;t even there.<\/p>\n\n\n\n<p>If the collapse value is used with some other elements, it works the same as the hidden value. Have a look at the output &#8211;<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-516\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Visibility-3.jpg\" alt=\"\" width=\"137\" height=\"82\"><br>As you can see, the row with data three and four is completely hidden. You can try some other examples. Try playing with this property for different values and different elements, and you will get familiar with the property.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS Visibility Property As the name suggests, visibility is a property with which we can decide whether to show the element or hide the element, without changing the layout of the document. This means that even if you hide the element, it will occupy the space it takes. If you did not understand it fully, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[9,13,193],"class_list":{"0":"post-512","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css-tutorial","7":"tag-css","8":"tag-css-tutorial","9":"tag-css-visibility"},"_links":{"self":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/512","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/comments?post=512"}],"version-history":[{"count":4,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/512\/revisions"}],"predecessor-version":[{"id":5664,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/512\/revisions\/5664"}],"wp:attachment":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/media?parent=512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/categories?post=512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/tags?post=512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}