Make one div visible and another invisible

css html visibility hidden
mattgcon picture mattgcon · Nov 3, 2010 · Viewed 121.2k times · Source

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.

Answer

Sujith picture Sujith · Nov 3, 2010

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"

Related questions

Hiding an element: Difference between Javascript attribute and CSS style

I wonder if there is any difference in the result when hiding an element with JavaScript attribute or CSS Style. For example: element.setAttribute("hidden", true); vs element.style.visibility = "hidden"; I experimented a bit with those two possibilities. My …

Read More
visibility:visible/hidden div

What is the best way to show a div when clicked on a button and then hide it with a close button?? My Jquery code is as follows: $(".imageIcon").click(function(){ $('.imageShowWrapper').css("visibility", 'visible'); }); $(".imageShowWrapper").click(function(){ $('.…

Read More
Initially hiding a div for later display

My web page is like the following: <div id="id1" class="stuff"> TEXT, FORMS, and STUFF </div> <div id="id2" class="stuff" style="display:none"> TEXT, FORMS, and STUFF </div> <div …

Read More