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