CSS Visibility Property
कभी-कभी कुछ Information हम Users से छिपाना चाहते हैं. या हमारा कुछ Content Premium हैं जो सिर्फ Paid Users के लिए Available हैं. तो हमे Content को Temporary छिपाना पडता हैं. या कुछ शर्तों के साथ दिखाना पडता हैं. Content को Hide करने के लिए CSS Visibility Property का इस्तेमाल किया जाता हैं. जिसके द्वारा Elements को Hide किया जा सकता हैं. Elements की Visibility Hidden करने के बाद वह Particular Element छिप जाता हैं. लेकिन, उसका White space दिखाई देता हैं
Syntax :- visibility : hidden | visible | collapse |
Elements को Hide करने के लिए Visibility Property द्वारा विभिन्न Values उपलब्ध करवाई जाती हैं
-
hidden – इस value से element hide हो जाता है।
-
visible – यह किसी भी element की default value होती है जिसमे element पूरी तरह visible होता है।
-
collapse – यह value मुख्यतः tables के लिए use की जाती है। इस value से आप किसी particular row या column को hide कर सकते है। ऐसा करने से उस row या column की जगह दूसरे rows या columns ले लेते है। यदि इस value को दूसरे elements के साथ use किया जाता है तो यह hidden की तरह ही काम करती है।
CSS Visibility Property
Sometimes we want to hide some information from users. Or some of our content is premium which is available only for paid users. So we have to hide the content temporarily. Or it has to be shown with certain conditions. CSS Visibility Property is used to hide content. Through which elements can be hidden. After hiding the visibility of elements, that particular element becomes hidden. But, its white space is visible.
Syntax :- visibility : hidden | visible | collapse |
To hide elements, various values are provided by the Visibility Property.
-
hidden- The element becomes hidden with this value.
-
visible- This is the default value of any element in which the element is completely visible.
-
collapse- This value is mainly used for tables. With this value you can hide a particular row or column. By doing this, that row or column is replaced by other rows or columns. If this value is used with other elements then it works just like hidden.
Example:
|
<html> <head> <title>CSS Visibility Property Demo</title> <style> #firstP { border: 1px solid green; visibility:hidden;width:300px; } #secondP { border:1px solid green; width:300px; } </style> </head> <body> <p id=”firstP”>This is a paragraph and initially its hidden. But white space for this paragraph is created by browser. </p> <p id=”secondP”>This is another paragraph. This paragraph can not take space of above paragraph because above paragraph is hidden using visibility property.</p> </body> </html> |