Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Oct 2011
    Posts
    595
    Thanks
    13
    Thanked 2 Times in 2 Posts

    Hiding a block of code with out deleting it

    Is there away I can hide a section of code, without deleting it?

  2. #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,594
    Thanks
    3
    Thanked 641 Times in 627 Posts
    Hi there Charisma,

    if you want to hide the section and the the space that it occupies, use display:none.

    If you want to hide the section but retain the space that it occupies, use visibility: hidden.

    To reverse the process use display:block and visibility: visible respectively.

    If the element that you hide with display:none is an inline element, then use display:inline-block .

    coothead
    Last edited by coothead; Oct 1st, 2019 at 04:33 PM.
    ~ the original bald headed old fart ~

  3. Users who have thanked coothead for this post:

    Charisma (Oct 1st, 2019)

  4. #3
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    11,405
    Thanks
    7
    Thanked 1,375 Times in 1,344 Posts
    And if you are talking about actual code in your documents you would comment it out.

    HTML:
    Code:
    <!-- nobody can see me but I’m still here -->
    CSS:
    Code:
    /* I will not be parsed by the browser */

  5. Users who have thanked VIPStephan for this post:

    Charisma (Oct 1st, 2019)

  6. #4
    Regular Coder
    Join Date
    Oct 2011
    Posts
    595
    Thanks
    13
    Thanked 2 Times in 2 Posts
    Thank you all.

  7. #5
    Regular Coder
    Join Date
    Oct 2011
    Posts
    595
    Thanks
    13
    Thanked 2 Times in 2 Posts
    This is what I did and got what I need.

    <!--
    <nav>
    <ul>
    <li><a href="#">Quotes</a></li>
    <li><a href="#" title="Link">Link2</a></li>
    <li><a href="#" title="Link">Link3</a></li>
    <li><a href="#" title="Link">Link4</a></li>
    <li><a href="#" title="Link">Link5</a></li>
    <li><a href="#" title="Link">Link6</a></li>
    </ul>
    </nav>
    </section>
    -->

  8. #6
    New to the CF scene
    Join Date
    Jul 2019
    Location
    Ahmedabad
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Charisma

    Yes there is a way to to hide section of code by set visibility set to hidden.

    Refer below code:

    This is my HTML code:

    Code:
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            #parent{
                width:50%;
                margin:15px;
                padding:20px;
                border: 2px solid yellow;
                background-color:burlywood;
                /*visibility:hidden;*/
                /*display:none;*/
            }
            #child {
                width: 50%;
                margin: 15px;
                padding: 20px;
                border: 2px solid red;
                background-color: aqua;
            }
        </style>
    </head>
    <body>
        <div id="parent">
            <p>
                This is a parent Div.
            </p>
        </div>
        <div id="child">
    
            <p>
                This is a Child Div.
            </p>
        </div>
    </body>
    </html>
    output:


    now, When i set div with parent id to visibility:hidden it will hide but it will take up space.

    Code:
    #parent{
                width:50%;
                margin:15px;
                padding:20px;
                border: 2px solid yellow;
                background-color:burlywood;
                visibility:hidden;            
            }
    Now output will look like this:


    you can see that div with #parent id is not showed now. but it took space.

    Hope this will help you.
    Thank you.
    Attached Thumbnails Attached Thumbnails -screenshot-118-.png   -screenshot-117-.png  
    Last edited by VIPStephan; Oct 4th, 2019 at 10:19 AM. Reason: added code BB tags


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •