<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<style type="text/css">
.dhtmlgoodies_question{
color: #FFF;
font-size: 0.9em;
background-color: #317082;
width: 100px;
margin-bottom: 2px;
margin-top: 2px;
padding-left: 2px;
background-image: url('images/bg_answer.gif');
background-repeat: no-repeat;
background-position: top right;
height: 20px;
overflow: hidden;
cursor: pointer;
text-align: center;
}
.dhtmlgoodies_answer{
border:1px solid #317082;
background-color:#E2EBED;
width:400px;
visibility:hidden;
height:0px;
overflow:hidden;
position:relative;
}
</style>
<script type="text/javascript">
var dhtmlgoodies_slideSpeed = 5; // Higher value = faster
var dhtmlgoodies_timer = 5; // Lower value = faster
var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
var dhtmlgoodies_slideInProgress = false;
var dhtmlgoodies_expandMultiple = false;
function showHideContent(e,inputId)
{
if(dhtmlgoodies_slideInProgress)return;
dhtmlgoodies_slideInProgress = true;
if(!inputId)inputId = this.id;
inputId = inputId + '';
var numericId = inputId.replace(/[^0-9]/g,'');
var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);
objectIdToSlideDown = false;
if(!answerDiv.style.display || answerDiv.style.display=='none'){
if(dhtmlgoodies_activeId && dhtmlgoodies_activeId!=numericId && !dhtmlgoodies_expandMultiple){
objectIdToSlideDown = numericId;
slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_s lideSpeed*-1));
}else{
answerDiv.style.display='block';
answerDiv.style.visibility = 'visible';
slideContent(numericId,dhtmlgoodies_slideSpeed);
}
}else{
slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
dhtmlgoodies_activeId = false;
}
}
function slideContent(inputId,direction)
{
var obj =document.getElementById('dhtmlgoodies_a' + inputId);
var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
height = obj.clientHeight;
if(height==0)height = obj.offsetHeight;
height = height + direction;
rerunFunction = true;
if(height>contentObj.offsetHeight){
height = contentObj.offsetHeight;
rerunFunction = false;
}
if(height<=1){
height = 1;
rerunFunction = false;
}
obj.style.height = height + 'px';
var topPos = height - contentObj.offsetHeight;
if(topPos>0)topPos=0;
contentObj.style.top = topPos + 'px';
if(rerunFunction){
setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
}else{
if(height<=1){
obj.style.display='none';
if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
slideContent(objectIdToSlideDown,dhtmlgoodies_slid eSpeed);
}else{
dhtmlgoodies_slideInProgress = false;
}
}else{
dhtmlgoodies_activeId = inputId;
dhtmlgoodies_slideInProgress = false;
}}}
function initShowHideDivs()
{
var divs = document.getElementsByTagName('DIV');
var divCounter = 1;
for(var no=0;no<divs.length;no++){
if(divs[no].className=='dhtmlgoodies_question'){
divs[no].onclick = showHideContent;
divs[no].id = 'dhtmlgoodies_q'+divCounter;
var answer = divs[no].nextSibling;
while(answer && answer.tagName!='DIV'){
answer = answer.nextSibling;
}
answer.id = 'dhtmlgoodies_a'+divCounter;
contentDiv = answer.getElementsByTagName('DIV')[0];
contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';
contentDiv.className='dhtmlgoodies_answer_content' ;
contentDiv.id = 'dhtmlgoodies_ac' + divCounter;
answer.style.display='none';
answer.style.height='1px';
divCounter++;
}
}
}
</script>
</head>
<body>
<div class="dhtmlgoodies_question">Click Here</div>
<div class="dhtmlgoodies_answer">
<div>
Ohh! There are so many:
<ul>
<li>Faster loading pages</li>
<li>Smoother loading pages</li>
<li>Saved bandwidth</li>
<li>Separate layout from content</li>
<li>Easy to change layout</li>
<li>Increased accessibility</li>
<li>Different styling for different media(print, screen, pda)</li>
</ul>
</div>
</div>
<script type="text/javascript">
initShowHideDivs();
showHideContent(false,1); // Automatically expand first item
</script>
</body>
</html>
