<style type="text/css">
.binkbenks_question{ /* Styling question */
 /* Start layout CSS */
 color:#FFF;
 font-size:0.9em;
 background-color:#317082;
 width:auto;
 margin-bottom:2px;
 margin-top:2px;
 padding-left:2px;
 -moz-border-radius: 5px;-webkit-border-radius: 5px;-o-border-radius: 5px; background-color: background: black;
 background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f));
 border-color: #BDBDBD; border-style: groove; border-width: 4px;font-family: Comic Sans MS;font-size: 16px; text-align:center;
 height:20px;

 /* End layout CSS */

 overflow:hidden;
 cursor:pointer;
}
.binkbenks_answer{ /* Parent box of slide down content */
 /* Start layout CSS */
 -moz-border-radius: 5px;-webkit-border-radius: 5px;-o-border-radius: 5px;
 border-color: #BDBDBD;
 border-style: inset;
 border-width: 2px;
 background:#151515 url(http://i1206.photobucket.com/albums/bb455/binkbenk/AlienLogo.png)no-repeat center;
 width:auto;
 font-family: Segoe Script;
 font-size: 14px;
 text-align: left;

 /* End layout CSS */

 visibility:hidden;
 height:0px;
 overflow:hidden;
 position:relative;

}
.binkbenks_answer_content{ /* Content that is slided down */
 padding:1px;
 font-size:0.9em;
 position:relative;
}
</style>
<script type="text/javascript">
var binkbenks_slideSpeed = 20; // Higher value = faster
var binkbenks_timer = 10; // Lower value = faster

var objectIdToSlideDown = false;
var binkbenks_activeId = false;
var binkbenks_slideInProgress = false;
var binkbenks_slideInProgress = false;
var binkbenks_expandMultiple = false; // true if you want to be able to have multiple items expanded at the same time.

function showHideContent(e,inputId)
{
 if(binkbenks_slideInProgress)return;
 binkbenks_slideInProgress = true;
 if(!inputId)inputId = this.id;
 inputId = inputId + '';
 var numericId = inputId.replace(/[^0-9]/g,'');
 var answerDiv = document.getElementById('binkbenks_a' + numericId);

 objectIdToSlideDown = false;

 if(!answerDiv.style.display || answerDiv.style.display=='none'){
  if(binkbenks_activeId &&  binkbenks_activeId!=numericId && !binkbenks_expandMultiple){
   objectIdToSlideDown = numericId;
   slideContent(binkbenks_activeId,(binkbenks_slideSpeed*-1));
  }else{

   answerDiv.style.display='block';
   answerDiv.style.visibility = 'visible';

   slideContent(numericId,binkbenks_slideSpeed);
  }
 }else{
  slideContent(numericId,(binkbenks_slideSpeed*-1));
  binkbenks_activeId = false;
 }
}

function slideContent(inputId,direction)
{

 var obj =document.getElementById('binkbenks_a' + inputId);
 var contentObj = document.getElementById('binkbenks_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 + ')',binkbenks_timer);
 }else{
  if(height<=1){
   obj.style.display='none';
   if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
    document.getElementById('binkbenks_a' + objectIdToSlideDown).style.display='block';
    document.getElementById('binkbenks_a' + objectIdToSlideDown).style.visibility='visible';
    slideContent(objectIdToSlideDown,binkbenks_slideSpeed);
   }else{
    binkbenks_slideInProgress = false;
   }
  }else{
   binkbenks_activeId = inputId;
   binkbenks_slideInProgress = false;
  }
 }
}



function initShowHideDivs()
{
 var divs = document.getElementsByTagName('DIV');
 var divCounter = 1;
 for(var no=0;no<divs.length;no++){
  if(divs[no].className=='binkbenks_question'){
   divs[no].onclick = showHideContent;
   divs[no].id = 'binkbenks_q'+divCounter;
   var answer = divs[no].nextSibling;
   while(answer && answer.tagName!='DIV'){
    answer = answer.nextSibling;
   }
   answer.id = 'binkbenks_a'+divCounter;
   contentDiv = answer.getElementsByTagName('DIV')[0];
   contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';
   contentDiv.className='binkbenks_answer_content';
   contentDiv.id = 'binkbenks_ac' + divCounter;
   answer.style.display='none';
   answer.style.height='1px';
   divCounter++;
  }
 }
}
window.onload = initShowHideDivs;
</script>

<div class="binkbenks_question">

@Theme Windows Xplore</div>
<div class="binkbenks_answer">

<div>

<ul>
<li><a href="http://blogloecooy.com/">black theme</a></li>
<li><a href="http://blogloecooy.com/">red theme</a></li>
<li><a href="http://blogloecooy.com/">blue theme</a></li>
<li><a href="http://blogloecooy.com/">yellow theme</a></li>
<li><a href="http://blogloecooy.com/">green theme</a></li>
<li><a href="http://blogloecooy.com/">dark theme</a></li>
<li><a href="http://blogloecooy.com/">sexy theme</a></li>
</ul>
</div>
</div>
<div class="binkbenks_question">

@Tebak-tebakan Narsis </div>
<div class="binkbenks_answer">

<div>

<ul>
<li><a href="http://blogloecooy.com/">jablay gila</a></li>
<li><a href="http://blogloecooy.com/">jomblo gila</a></li>
<li><a href="http://blogloecooy.com/">stress gila</a></li>
<li><a href="http://blogloecooy.com/">balap gila</a></li>
<li><a href="http://blogloecooy.com/">nangis gila</a></li>
<li><a href="http://blogloecooy.com/">susah gila</a></li>
</ul>
</div>
</div>
<div class="binkbenks_question">

@Tips & Tricks</div>
<div class="binkbenks_answer">

<div>

<ul>
<li><a href="http://blogloecooy.com/">Tips & Tricks merayu</a></li>
<li><a href="http://blogloecooy.com/">Tips & Tricks menipu</a></li>
<li><a href="http://blogloecooy.com/">Tips & Tricks menggauli</a></li>
<li><a href="http://blogloecooy.com/">Tips & Tricks Merangsang</a></li>
<li><a href="http://blogloecooy.com/">Tips & Tricks bercinta</a></li>
<li><a href="http://blogloecooy.com/">Tips & Tricks gila</a></li>
</ul>
</div>
</div>

Untuk Melihat hasil dari kode CSS diatas silahkan Klik Demonya Sobat, klik aja pada menu @Theme Windows Xplore , @Tebak-tebakan Narsis atau @Tips & Tricks,  Bagaimana jelek ya ??? Cara pemasanganya sebagai berikut :

Original : www.stunicholls.com