Show/Hide Divs Question

**theflyingminstrel** · 07-08-2009, 10:51 PM

Is there a way to have this script show/hide the target divs by one hyperlink, rather than one to show and one to hide?

Thanks.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>

<script language=javascript type='text/javascript'>
function hideDiv(pass) {
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){//if they are 'see' divs
if (document.getElementById) // DOM3 = IE5, NS6
divs[i].style.visibility="hidden";// show/hide
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'hidden';
else // IE 4
document.all.hideshow.divs[i].visibility = 'hidden';
}
}
}

function showDiv(pass) {
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){
if (document.getElementById)
divs[i].style.visibility="visible";
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'visible';
else // IE 4
document.all.hideshow.divs[i].visibility = 'visible';
}
}
}
</script> 

</head>

<body>

<div id="256a">
My content
</div>

<div id="256b">
Blah
</div>

<div id="512a">
Blah
</div> 


<a href="javascript:hideDiv('256')">hide Div 256</a>
<a href="javascript:showDiv('256')">show Div 256</a>
<a href="javascript:hideDiv('512')">hide Div 512</a>
<a href="javascript:showDiv('512')">show Div 512</a> 

</body>

</html>

**vwphillips** · 07-09-2009, 08:44 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>

<script language=javascript type='text/javascript'>
function hideDiv(pass) {
 var divs = document.getElementsByTagName('div');
 for(i=0;i<divs.length;i++){
  if(divs[i].id.match(pass)&&divs[i].style.visibility){//if they are 'see' divs
   divs[i].style.visibility=divs[i].style.visibility=="hidden"?"visible":"hidden";// show/hide
  }
 }
}

</script>

</head>

<body>

<div id="256a" style="visibility:visible;" >
My content
</div>

<div id="256b" style="visibility:visible;">
Blah
</div>

<div id="512a" style="visibility:visible;">
Blah
</div>


<a href="javascript:hideDiv('256')">hide Div 256</a>
<a href="javascript:hideDiv('512')">hide Div 512</a>

</body>

</html>

**theflyingminstrel** · 07-09-2009, 02:02 PM

That's perefect, thanks so much!

Thread: Show/Hide Divs Question

Thread Tools

Search Thread

Show/Hide Divs Question

Bookmarks

Bookmarks

Posting Permissions