Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make one div visible and another invisible

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.

like image 380
mattgcon Avatar asked Nov 03 '10 06:11

mattgcon


People also ask

How do I hide a specific div?

To hide a div using JavaScript, get reference to the div element, and assign value of "none" to the element. style. display property.

How do you make a div hidden in HTML?

To hide an element, set the style display property to “none”. document. getElementById("element"). style.

How do you make a div visible in JavaScript?

visibility = 'visible'; If you are using jQuery, you can do it even easier as long as you want to set the display property: $(elem). hide(); $(elem).


2 Answers

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" 
like image 182
Sujith Avatar answered Sep 21 '22 06:09

Sujith


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.

like image 42
My Other Me Avatar answered Sep 23 '22 06:09

My Other Me