...

View Full Version : Show/hide pannels



ferret219
12-13-2006, 07:39 PM
I would like to be able to show and hide panels on my website. I plan to use something like http://www.screenmonkey.co.uk

Any ideas?

Chris

coothead
12-13-2006, 08:40 PM
Hi there ferret219,

and a warm welcome to these forums. ;)

Here is an example...


<!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>

coothead



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum