<style type="text/css">
 
body{
 font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font to use */
 margin:0px;
 
}
 
.dhtmlgoodies_question{ /* Styling question */
 /* Start layout <span style="border-bottom: 1px dotted black;">CSS</span> */
 width:107px;
 
 /* End layout <span style="border-bottom: 1px dotted black;">CSS</span> */
 
 overflow:hidden;
 cursor:pointer;
}
.dhtmlgoodies_answer{ /* Parent box of slide down content */
 
 visibility:hidden;
 height:1px;
 overflow:hidden;
 position:relative;
 
}
.dhtmlgoodies_answer_content{ /* Content that is slided down */
 padding:1px;
 position:relative;
}
 
</style>
<script type="text/javascript">
 
var dhtmlgoodies_slideSpeed = 15; // Higher value = faster
var dhtmlgoodies_timer = 10; // Lower value = faster
 
var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
var dhtmlgoodies_slideInProgress = false;
var dhtmlgoodies_slideInProgress = false;
var dhtmlgoodies_expandMultiple = true; // true if you want to be able to have multiple items expanded at the same time.
 
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_slideSpeed*-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_slideSpeed);
   }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++;
  }
 }
}
window.onload = initShowHideDivs;
</script>
 
 
 
<hr>
<div class="dhtmlgoodies_question" style="font-size: 16px;"><a><b>&#8250;Nuo 2012</b></a></div>
<div class="dhtmlgoodies_answer">
 <div>
 
<span style="font-size: 9px;">abc<br></span>
<b><span style="font-size: 12px;">abc</b></span><br><br>
 
<span style="font-size: 9px;">abc<br></span>
<b><span style="font-size: 12px;">abc</b></span><br><br>
 
<span style="font-size: 9px;">abc<br></span>
<b><span style="font-size: 12px;">abc</b></span><br><br><br>
</div></div>
 
<hr>
<div class="dhtmlgoodies_question" style="font-size: 16px;"><a><b>&#8250;2008-2011</b></a></div>
<div class="dhtmlgoodies_answer">
 <div>
 
<span style="font-size: 9px;">abc<br></span>
<b><span style="font-size: 12px;">abc</b></span><br><br>
 
<span style="font-size: 9px;">abc<br></span>
<b><span style="font-size: 12px;">abc</b></span><br><br>
 
<span style="font-size: 9px;">abc<br></span>
<b><span style="font-size: 12px;">abc</b></span><br><br><br>
</div></div>
 
<hr>
<div class="dhtmlgoodies_question" style="font-size: 16px;"><a><b>&#8250;2005-2007</b></a></div>
<div class="dhtmlgoodies_answer">
 <div>
 
<span style="font-size: 9px;">abc<br></span>
<b><span style="font-size: 12px;">abc</b></span><br><br>
 
<span style="font-size: 9px;">abc<br></span>
<b><span style="font-size: 12px;">abc</b></span><br><br>
 
<span style="font-size: 9px;">abc<br></span>
<b><span style="font-size: 12px;">abc</b></span><br><br><br>
</div></div>
 
 
 
<br><br>
 </div>
<br><br>
</div><br>