Forum Moderators: open
function showhide(show, hide)
{
if(document.getElementById)
{
if(show!= '')
{
var show2 = document.getElementById(show).style;
show2.display = show2.display? "":"block";
}
if(hide!= '')
{
var hide2 = document.getElementById(hide).style;
hide2.display = hide2.display? "":"none";
}
}
}
If anyone can help me by tonight, that would be greatly appreciated, as I have a site deadline and I just can't figure out what is causing it.
It is very strange, it only occurs sometimes in IE, and the gap is different sizes each time I close out and reopen IE.
<?xml version="1.0" encoding="iso-8859-1"?>
<!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">
<head>
<title>Example</title>
<script type="text/javascript">
//<![CDATA[
function change(id, newClass)
{
identity=document.getElementById(id);
identity.className=newClass;
}
//]]>
</script>
<style type="text/css">div.hideme {
display: none;
}
div.showme11 {
background: #000;
color: #fff;
}
div.showme22 {
background: #fff;
border: #aaa solid 1px;
color: #000;
}
</style>
</head><body>
<div class="showme11" id="one11" onclick="change('two22', 'showme22'); change('one11', 'hideme');"><span>Use any element with onclick event including images, no anchor element required.</span></div>
<div class="hideme" id="two22" onclick="change('one11', 'showme11'); change('two22', 'hideme');"><span>div two</span></div></body>
</html>
- John
here is another example that may suit your requirements...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>show/hide info</title>
<base href="http://mysite.orange.co.uk/azygous/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
.container {
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
margin:4px 0;
}
.container img {
vertical-align:bottom;
}
.container span {
font-weight:bold;
cursor:pointer;
}
.off {
display:none;
}
.on {
display:block;
margin:10px 30px;
text-align:justify;
color:#003;
background-color:#eef;
}
-->
</style><script type="text/javascript">
<!--
window.onload=function() {
spn=document.getElementsByTagName('span');
for(c=0;c<spn.length;c++) {
spn[c].onclick=function() {
if(this.id!='') {
stuff(this.id.split('s')[1]);
}
}
}
}
function stuff(n) {dvs=document.getElementsByTagName('div');
ims=document.getElementsByTagName('img');
info=document.getElementById('div'+n);
pic=document.getElementById('img'+n);for(c=0;c<dvs.length;c++) {
if((dvs[c].className=='on')&&(dvs[c].id!='div'+n)) {
dvs[c].className='off';
}
}
for(c=0;c<ims.length;c++) {
ims[c].src='images/plus.GIF';
}
if(info.className=='on') {
info.className='off';
pic.src='images/plus.GIF';
}
else {
info.className='on';
pic.src='images/minus.GIF';
}
}//-->
</script></head>
<body><div class="container">
<img id="img0" src="images/plus.GIF" alt=""/>
<span id="s0">John Smith</span>
<div id="div0" class="off">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</div>
</div><div class="container">
<img id="img1" src="images/plus.GIF" alt=""/>
<span id="s1">Frank Furter</span>
<div id="div1" class="off">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</div>
</div><div class="container">
<img id="img2" src="images/plus.GIF" alt=""/>
<span id="s2">Mary Contrary</span>
<div id="div2" class="off">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</div>
</div><div class="container">
<img id="img3" src="images/plus.GIF" alt=""/>
<span id="s3">Joe Bloggs</span>
<div id="div3" class="off">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</div>
</div></body>
</html>
birdbrain
