show and hide a css div with JS

[ogletree]

I'm trying to add a Show/Hide button and I got it to work just fine. The only problem is I can't get the stuff below what I just hid to shift up to fill the whole left by the hidden div.

This works fine.

function hidediv()
{
var gmap = document.getElementById("gmap");

gmap.style.visibility="";
gmap.style.display="none";

}

I tried adding

gmap.style.height="0px";

and nothing happened. When I go to the gmap div and just manually change the height to 0px it works like I want. How can I change the height?

[penders]

Setting the

visibility

to 'hidden' (not an empty string) will make the element invisible, but it will still take up the space as if it was still there.

Setting the

display

to 'none' will remove the element from the page, so any elements that follow in the flow of the page should then occupy the space.

It should not matter that you are setting both visibility and display, the fact that you are setting display to 'none' should remove the element from the page. (You could try removing the visibility line as it does not seem necessary in your case.)

However, whether the following content does move up to occupy the space could depend on the structure of your page. If 'gmap' is an inner DIV and the outer DIV is still visible, then the outer DIV is going to prevent the content that follows from moving up. Also, do you have positioned content, or does it all flow one after the other?

Ah, you say if you manually set the height to 0 it does all zip up?! Is your code executing successfully... no errors?

[CyBerAliEn]

What I tend to do is develop little helper functions, ie:
function hideDIV(myid)
{
var myobj = document.getElementById(myid);
myobj.style.display = 'none';
return false;
}

function showDIV(myid)
{
var myobj = document.getElementById(myid);
myobj.style.display = '';
return false;
}

Then, to hide or show, just do something like:
hideDIV('gmap');
showDIV('gmap');

In CSS, as previous replier notes, using "visibility" will show or hide an item from the user. BUT, it only -hides- the item, it is still there, taking up space.

To make an item -disappear-, and not use space, you have to set its display to 'none'. This essentially removes it from the user's browser, as if it were never even rendered or there to begin with (other items will flow up and fill the space naturally, as if the 'hide' block of code was not even there).

Note, that this method works in Firefox/IE/etc. I made the mistake of making the show function do 'block' instead of '', and this introduced unintended errors. Because by setting it to '' with JS, you are really telling the browser to revert to whatever its default was (which is declared via browser defaults or user CSS [classes, in-line styles, etc]).

Good luck!

[CyBerAliEn]

Oh, also to note...

You can change height via JS in the same manner as you do visibility/display:

myDivObj.style.height = '0px';

(I think the reason your code wasn't working as intended was because you were setting its 'visibility' style, instead of 'display')

[ogletree]

Here is what I ended up doing. The guy I was doing it for decided he wanted to start with a smaller map and make it bigger. I also had to ad the areaid to make it bigger and smaller. It all works grate now. I put the buttons below that I used as well. The centermap() function is to make sure the map re centers after I enlarge it or make smaller..

function showdiv()
{
var areaid = document.getElementById("areaid");
var map = document.getElementById("map");

map.style.height="420px";
areaid.style.height="329px";
}

function hidediv()
{
var areaid = document.getElementById("areaid");
var map = document.getElementById("map");

map.style.height="165px";
areaid.style.height="73px";

}
function centermap()
{
map.checkResize();

map.setCenter(new GLatLng(<?php echo $latlon; ?>), 11);

}
</script>

<form>
<input type="button" value="Smaller Map" onclick="hidediv() ; centermap()"/>
<input type="button" value="Larger Map" onclick="showdiv() ; centermap()" />

</form>