Show-hide function question from newbie

[caglarozdag]

hi all, i started using JavaScript yesterday so i am really really new. When i call the following functions on a page an empty gap appears bellow the footer. I don't know how to eliminate it.

Show hide functions.

function show(elemID)
{
	var elem=document.getElementById(elemID);
	elem.style.position='relative';
	elem.style.visibility='visible';
}
function hide(elemID)
{
	var elem=document.getElementById(elemID);
	elem.style.position='absolute'
	elem.style.visibility='hidden';
}
function show_hide(elemID)
{
	var elem=document.getElementById(elemID);
	if(elem.style.visibility=='hidden')
	{
		show(elemID);
	}
	else
	{
		hide(elemID);
	}
}

how i call it in the php code:

A_PARAGRAPH_REFERRING_TO_AN_IMAGE...<a href='#' onclick='javascript: show_hide(9); return false;'>Click to see the image.</a>

<div style='visibility: hidden; position: absolute;' class='faq' id='9'><img src="./include/hurriyet1_main.jpg"></div>

Thanks already.

[vikrantkorde]

Instead of using
elem.style.visibility='visible';
elem.style.visibility='hidden';

use
elem.style.display='block';
elem.style.display='none';

[caglarozdag]

hi,

thanks for the reply. I've made the changes. But the gap still exists, plus now i don't think the function works anymore. when i click to open up the box, instead of showing the content inside the box, it displays empty space (like there is a <br> right where the box is supposed to be), and when i click again to close the empty space, nothing happens.
is there a problem with the way i call the function?

===in php===
<a href='#' onclick='javascript: show_hide(18); return false;'>more...</a>

<div style='visibility: hidden; position: absolute;' class='faq' id='18'>more stuff</div>

===in functions.js===


function show(elemID)
{
var elem=document.getElementById(elemID);
elem.style.position='relative';
elem.style.display='block';
}
function hide(elemID)
{
var elem=document.getElementById(elemID);
elem.style.position='absolute'
elem.style.display='none';
}
function show_hide(elemID)
{
var elem=document.getElementById(elemID);
if(elem.style.visibility=='hidden')
{
show(elemID);
}
else
{
hide(elemID);
}
}




thanks.

[vikrantkorde]

you need to change all the occurances of
visibility with display
and
hidden with none

even in <div style='visibility: hidden;....

basically visibility only hides the element but keeps the space occupied. however display hides object as well as the space is not consumed.
id you thing JS function is not working then put alert("hi"); at the start of the function and check if atleast function is getting called.

[caglarozdag]

hi,

i've made the changes and the gap is still there.

[micropat]

You're talking about an empty gap below a footer, but there's no obvious footer in your testcase. You should provide a better testcase.

My guess is that if you made the visibility to display property changes, it's probably an issue with CSS (your stylesheet).

Try including Yahoo's CSS reset file to reset all your elements' paddings/margins to see if it's actually a CSS issue....

<link rel="stylesheet" type="text/css" href="http://developer.yahoo.com/yui/build/reset/reset.css">

[caglarozdag]

thanks for the tip. I found my simple CSS mistake, and solved the problem.