Question

Some code when I call a showhide method in html is not working correctly. The method shows then hides some html content on this webpage, however, the html or css is not functioning correctly. For example, when the page is loaded in a browser, the space where the div will be shown is just empty space, when there shouldn’t be space at all, but when the div is shown it just fills that space. The I think it could be something to do with the css, however I am not to sure. Here is the CSS id I am using to show and hide.

#showAndHide {
    text-align: justify;
    height: auto;
    width: 700px;
    margin: auto;
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 10px;
    visibility: hidden;
}

and here is a small sample of the html that this is being applied to.

<div id="showAndHide">
   <div id="physicalAdress">                        
     <div class="h4">
       <h4> What is your physical address? </h4>
     </div> 

     <p> Property name (if you have one) </p>
     <input type="text" name="propertyName" /><br/>

that html is within the showandhide div, then within a user input div which is:

.userinput {
    text-align: justify;
    height: auto;
    width: 700px;
    margin: auto;
    position: relative;
    border-collapse: collapse;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 10px;
    border-right-style: solid;
    border-left-style: solid;
}

here is the Javascript method.

function showHideDiv()
{
    var divstyle = new String();
    divstyle = document.getElementById("showAndHide").style.visibility;

    if(document.getElementById("yesPrint").checked == true) 
    {
       document.getElementById("showAndHide").style.visibility = "visible";
    }
    if(document.getElementById("noPrint").checked == true) 
    {
        document.getElementById("showAndHide").style.visibility = "hidden";
    }   
 }

Basically when I run the page, and show the content the styling is becoming skewed and the positioning of the html that is not with the show and hide content is also becoming skewed.

Any ideas/help would be appreciated.

Answer 1

Change visibility:hidden to display:none to prevent the element from taking up space when hidden.

You may need to change your JavaScript slightly, but I can’t say for sure as you haven’t posted it, but you’re going to need something like this:

element.style.display = "block"; //Show the element