Expand & Collapse 4

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>

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

If you want to have the page load with a div already revealed simply use the query string to pass the number in the divs id

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 // 0 = no 1 = yes: automatically hides the previously revealed content

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')
}

}

// passing the divs number via the query string will automatically reveal the div when the page loads
if (location.search.length > 0){
preNum = unescape(location.search.substring(1))
window["my_object"+preNum].chk_status(preNum,'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)
this.height=this.stop
}

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