Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Hide an Element - display:none or visibility:hidden?

    @deepika.rana
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 275
    Comment on it

    display:none:

    • An element can be hidden by setting the display property to none.
    • This property hides element in such a way that when the page will be displayed it is displayed as if the element is not there.
    • The layout is as there was no such element.
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <style>
    5. h1.hidden {
    6.     display: none;
    7. }
    8. </style>
    9. </head>
    10. <body>
    11.  
    12. <h1>This is a visible heading</h1>
    13. <h1 class="hidden">This is a hidden heading</h1>
    14. <p>Notice that the h1 element with display: none; does not take up any space.</p>
    15.  
    16. </body>
    17. </html>
    18.  

    visibility:hidden:

    • An element can be hidden by setting the visibility property to hidden.
    • This property hides element in such a way that when the page will be displayed it is displayed as if the element is there i.e it takes up the same space as before.
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <style>
    5. h1.hidden {
    6.     visibility: hidden;
    7. }
    8. </style>
    9. </head>
    10. <body>
    11.  
    12. <h1>This is a visible heading</h1>
    13. <h1 class="hidden">This is a hidden heading</h1>
    14. <p>Notice that the hidden heading still takes up space.</p>
    15.  
    16. </body>
    17. </html>

     

    dispaly:none visibility:hidden
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: