Forum Moderators: open
I have this script:
function hideDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideShow').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'hidden';
}
else { // IE 4
document.all.hideShow.style.visibility = 'hidden';
}
}
}
function showDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideShow').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'visible';
}
else { // IE 4
document.all.hideShow.style.visibility = 'visible';
}
}
}
this works fine, but if the text is invisible, it still leaves a gap for where the text should be! Could anyone please tell me how I can get rid of this gap
You need the display property:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
<head>
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
#myDiv {
display:none;
}
</style>
<script type="text/javascript">
function showhide(elem,state){
if (document.getElementById){
document.getElementById(elem).style.display=state;
}
}
</script>
</head>
<body>
<p>some text</p>
<div id="myDiv"><p>text here</p></div>
<p><a href="#" onclick="showhide('myDiv','block'); return false;">show</a><br />
<a href="#" onclick="showhide('myDiv','none'); return false;">hide</a></p>
</body>
</html>
