Forum Moderators: open
<!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">
(truncated here)
window.onload=function() {
spn=document.getElementsByTagName('span');
Here you get all the span elements and apply the click event handler; you should instead add a class="myclass" to the spans you need to be clickable and then
window.onload=function() {
spn=document.getElementsByClassName('myclass');
The same exact reasoning can be applied if wht you want is restrict what images get replaced with the plus/minus gifs, you should make sure that you choose only these images before replacing theyr src attribute.
I am sorry about that.
When I first made that script, I had not taken into account other content that would be on the page.
Since then I have revised it to cure the image problem and to also make it degrade gracefully for
those with javascript disabled.
Here is the revised code...
<!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://www.coothead.co.uk/images/">
<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">
if(window.addEventListener){
window.addEventListener('load',init,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',init);
}
}function init(){
spn=document.getElementById('wrapper').getElementsByTagName('span');
for(c=0;c<spn.length;c++) {
document.getElementById('div'+c).className='off';
spn[c].onclick=function() {
if(this.id!='') {
stuff(this.id.split('s')[1]);
}
}
}
}
function stuff(n) {dvs=document.getElementById('wrapper').getElementsByTagName('div');
ims=document.getElementById('wrapper').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='plus.GIF';
}
if(info.className=='on') {
info.className='off';
pic.src='plus.GIF';
}
else {
info.className='on';
pic.src='minus.GIF';
}
}</script>
</head>
<body><div id="wrapper">
<div class="container">
<span id="s0"><img id="img0" src="plus.GIF" alt=""/>
John Smith</span>
<div id="div0">
Lorem ipsum
</div>
</div><div class="container">
<span id="s1"><img id="img1" src="plus.GIF" alt=""/>
Frank Furter</span>
<div id="div1">
Lorem ipsum
</div>
</div><div class="container">
<span id="s2"><img id="img2" src="plus.GIF" alt=""/>
Mary Contrary</span>
<div id="div2">
Lorem ipsum
</div>
</div><div class="container">
<span id="s3"><img id="img3" src="plus.GIF" alt=""/>
Joe Bloggs</span>
<div id="div3">
Lorem ipsum
</div>
</div>
</div></body>
</html>
Hi there Shores,
Note:-
I believe that the function getElementsByClassName() is at, present, unsupported by IE.
birdbrain
