Ok. This is a quick version.
Let me know if this is what you had in mind.
This version does not pander to those with Javascript disabled. That's for next post (if this works for you).
Here is the HTML with all the CSS and Javascript inside of it:
[HTML]<html>
<head>
<meta name="save" content="history" />
<style type="text/css">
<!--
.save{
behavior:url(#default#savehistory);
}
.exp {
border: 1px solid #ccc;
}
p.exphead {
display: block;
width: %100;
}
a.dsphead {
display: block;
width: %100;
border-top: 1px solid #ccc;
background-color: #ccc;
}
a.dsphead:hover {
border-top: 1px solid #ccc;
}
a.dsphead span.dspchar {
font-size: 0.8em;
margin-left: 10px;
}
.dspcont {
display:none;
margin: 0 10px;
padding: 0 10px;
}
-->
</style>
<script type="text/javascript">
function dsp(loc){
if(document.getElementById){
var foc=loc.firstChild;
foc=loc.firstChild.innerHTML?
loc.firstChild:
loc.firstChild.nextSibling;
foc.innerHTML=foc.innerHTML=='Show Info'?'Hide Info':'Show Info';
foc=loc.parentNode.nextSibling.style?
loc.parentNode.nextSibling:
loc.parentNode.nextSibling.nextSibling;
foc.style.display=foc.style.display=='block'?'none ':'block';}}
if(!document.getElementById)
document.write('<style type="text/css"><!--\n'+
'.dspcont{display:block;}\n'+
'//--></style>');
</script>
</head>
<body>
<div class="save">
<div class="exp">
<p class="exphead">
<a href="javascript
:void(0)" class="dsphead" onclick="dsp(this)">Heading <span class="dspchar">Show Info</span></a>
</p>
<div class="dspcont">
<p>Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.</p>
</div>
</div>
</body>
</html>[/HTML]
20
