I have two div tags, one is for the search and the other is for the results. What I need is for when the submit button is clicked the results are returned and placed into the results div (with an iframe) and the search div should become hidden and the results div should be made visible.
search div is initially set to visible (using the visibility to visible) and the results div is initially set to hidden (using the visibility to hidden).
Also, initially ther eis a huge white space at the bottom of the page where the hidden div is, so how do I make sure there is no extra white space at the bottom too.
Making it invisible with visibility still makes it use up space. Rather try set the display to none to make it invisible, and then set the display to block to make it visible.
You can use the display property of style. Intialy set the result section style as
style = "display:none"
Then the div will not be visible and there won't be any white space.
Once the search results are being populated change the display property using the java script like
document.getElementById("someObj").style.display = "block"
Using java script you can make the div invisible
document.getElementById("someObj").style.display = "none"
I don't think that you really want an iframe, do you?
Unless you're doing something weird, you should be getting your results back as JSON or (in the worst case) XML, right?
For your white box / extra space issue, try
style="display: none;"
instead of
style="visibility: hidden;"
If u want to use display=block it will make the content reader jump, so instead of using display you can set the left attribute to a negative value which does not exist in your html page to be displayed but actually it do.
I hope you must be understanding my point, if I am unable to make u understand u can message me back.
来源：https://stackoverflow.com/questions/4084674/make-one-div-visible-and-another-invisible