A div scrolls open and automatically expands to the height of its contents
Two elements are used in pairs for each expand and collapse, a calling element which can be any appropriate html tag, and a div.
You can have any number of expand and collapse elements but each pair must have the same ordinal number
<div id="expander1">Click Me (Calling Element)</div>
<div id="expdiv1" class="hidden_main">Hidden Content</div>
<div id="expander2">Click Me (Calling Element)</div>
<div id="expdiv2" class="hidden_main">Hidden Content</div>
Because the script references both ID's the calling element must have expander as its ID and the hidden divs ID must be expdiv as well as the ordinal number.
The script references both these ID's to count how many expand and collapse elements you have in your page in order to create the necessary objects and to apply the appropriate onclick event to the calling element.
You can set the script to automatically hide the previously revealed content as another content is shown by changing the value of variable hideLast
0 = yes 1 = no
Customising the divs is down to personel preference but the hidden div must use the following
<style type="text/css">
.hidden_main{
position:relative;
display:none;
overflow:hidden;
}
</style>
When using position relative any content below the expanding div will move down the page
If you use position absolute the expanding div is shown over the top of any content below it with the exception of any divs used for the expand and collapse.
<script type="text/javascript">
<!--
//Jeff
//www.huntingground.freeserve.co.uk
speed=15
hideLast=0
function initExpCol(){
count=0
numOfObj=0
tags=document.getElementsByTagName("DIV")
while(tags[count]){
if(tags[count].id.indexOf("expdiv")!= -1){
numOfObj++
}
count++
}
for(var i=1;i<=numOfObj;i++){
window["my_object"+i]=new create("expdiv"+i)
document.getElementById("expander"+i).i=i
document.getElementById("expander"+i).onclick=function(){
window["my_object"+this.i].chk_status(this.i,'down')
}
}
}
lastNum=null
function create(id){ //define properties, pass id
this.id=id
this.num=this.id.replace(/[A-z]/g,"")
this.element=document.getElementById(this.id)
this.height=this.element.offsetHeight
this.timer=null
this.running=0
this.chk_status=function(num,d){
if(hideLast==1&&this.num!=lastNum&&lastNum!=null&&document.getElementById("expdiv"+lastNum).offsetHeight>0){
window["my_object"+lastNum].chk_status(lastNum,'up')
}
this.dir=d
if(this.dir=="up"){
document.getElementById("expander"+this.num).onclick=function(){
window["my_object"+num].chk_status(num,'down')
}
}
if(this.dir=="down"){
document.getElementById("expander"+this.num).onclick=function(){
window["my_object"+num].chk_status(num,'up')
}
}
this.running=1
this.step=speed
window["my_object"+num].animate('my_object'+num,num)
lastNum=this.num
}
this.animate=function(myobject,num){
clearTimeout(this.timer)
if(this.dir=="down"){
this.element.style.display="block"
this.height+=this.step
}
else{
this.height-=this.step
}
this.stop=this.element.scrollHeight
this.timer=setTimeout(myobject+".animate('"+myobject+"','"+num+"')",50)
if(this.dir=="down"&&this.height>this.stop){
this.running=0
clearTimeout(this.timer)
}
if(this.dir=="up"&&this.height<=speed){
this.height=0
this.running=0
clearTimeout(this.timer)
this.element.style.display="none"
}
this.element.style.height=this.height
}
}
// add onload="initExpCol()" to the opening BODY tag
// -->
</script>
<div id="expander1">Click</div>
<div id="expdiv1" class="hidden_main">Dummy Text<br>end</div>
<div id="expander2">Click</div>
<div id="expdiv2" class="hidden_main">Dummy Text<br>Dummy Text<br>end</div>
<div id="expander3">Click</div>
<div id="expdiv3" class="hidden_main">Dummy Text<br>Dummy Text<br>Dummy Text<br>End</div>
<div id="expander4">Click</div>
<div id="expdiv4" class="hidden_main">Dummy Text<br>Dummy Text<br>Dummy Text<br>Dummy Text<br>End</div>
<div id="expander5">Click</div>
<div id="expdiv5" class="hidden_main">Dummy Text<br>Dummy Text<br>Dummy Text<br>Dummy Text<br>End</div>
If you use a div as a calling element then clicking anywhere within that div will expand or collapse the hidden div.
This is an example of using single inline words or groups of words