Javascript show hide css/html/js problem

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.

Samich · Accepted Answer · 2011-08-31 06:59:20Z

3

use display:none instead of visibility: hidden;.

visibility: hidden; reserves space for element

answered Aug 31, 2011 at 6:59

Samich

30.4k6 gold badges70 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

James Allardice · Accepted Answer · 2011-08-31 06:58:29Z

0

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

answered Aug 31, 2011 at 6:58

James Allardice

166k22 gold badges335 silver badges316 bronze badges

1 Comment

RobG Over a year ago

Toggle between 'none' and '' (empty string) so that the element adopts its default or inherited display property when not hidden.

TROODON · Accepted Answer · 2011-08-31 07:08:57Z

0

function toggle_show(id) {
    var el = document.getElementById(id);
    if (el && el.style) {
        el.style.display = el.style.display == 'none' ? 'block' : 'none';
    }
}

edited Aug 31, 2011 at 7:08

answered Aug 31, 2011 at 7:02

TROODON

1,1751 gold badge9 silver badges17 bronze badges

Comments

jtsao22 · Accepted Answer · 2011-08-31 07:17:31Z

0

http://webdesign.about.com/od/css/f/blfaqhidden.htm Quoting webdesign:

"visibility: hidden hides the element, but it still takes up space in the layout.

display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code."

answered Aug 31, 2011 at 7:17

jtsao22

1,9721 gold badge13 silver badges13 bronze badges

Collectives™ on Stack Overflow

Javascript show hide css/html/js problem

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related