<!-- Paste this code into the CSS section of your HTML document -->

#dhtmlgoodies_contentBox {
border:1px solid #317082;
height:0px;
visibility:hidden;
position:absolute;
background-color:#E2EBED;
overflow:hidden;
padding:2px;
width:250px;
}

#dhtmlgoodies_content {
position:relative;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
width:100%;
font-size:0.8em;
}

#dhtmlgoodies_slidedown {
position:relative;
width:250px;
}


<!-- Paste this code into an external JavaScript file named: dropDown.js -->

/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Alf Magne Kalleland :: http://www.dhtmlgoodies.com/ */

/************************************************************************************************************
(C) www.dhtmlgoodies.com, September 2005
Terms of use: You are free to use this script as long as the copyright message is kept intact. However,
you may not redistribute, sell or repost it without our permission.

Alf Magne Kalleland
************************************************************************************************************/

var initHeight = 0;
var slidedown_direction = 1;
var slidedownContentBox = false;
var slidedownContent = false;
var slidedownActive = false;
var contentHeight = false;
var slidedownSpeed = 3; // Higher value = faster script
var slidedownTimer = 7; // Lower value = faster script

function slidedown_showHide() {
if(initHeight==0)slidedown_direction=slidedownSpeed; else slidedown_direction = slidedownSpeed*-1;
if(!slidedownContentBox) {
slidedownContentBox = document.getElementById('dhtmlgoodies_contentBox');
slidedownContent = document.getElementById('dhtmlgoodies_content');
contentHeight = document.getElementById('dhtmlgoodies_content').offsetHeight;
}
slidedownContentBox.style.visibility='visible';
slidedownActive = true;
slidedown_showHide_start();
}

function slidedown_showHide_start() {
if(!slidedownActive)return;
initHeight = initHeight/1 + slidedown_direction;
if(initHeight <= 0) {
slidedownActive = false;
slidedownContentBox.style.visibility='hidden';
initHeight = 0;
}
if(initHeight>contentHeight) {
slidedownActive = false;
}
slidedownContentBox.style.height = initHeight + 'px';
slidedownContent.style.top = initHeight - contentHeight + 'px';
setTimeout('slidedown_showHide_start()',slidedownTimer); // Choose a lower value than 10 to make the script move faster
}

function setslidedownWidth(newWidth) {
document.getElementById('dhtmlgoodies_slidedown').style.width = newWidth + 'px';
document.getElementById('dhtmlgoodies_contentBox').style.width = newWidth + 'px';
}

function setSlideDownSpeed(newSpeed) {
slidedownSpeed = newSpeed;
}

<!-- Paste this code into the HEAD section of your HTML document.
You may need to change the path of the file. -->

<script type="text/javascript" src="dropDown.js"></script>

<!-- Paste this code into the BODY section of your HTML document -->

<div id="dhtmlgoodies_slidedown">
<div id="dhtmlgoodies_control">
<a href="#" onclick="slidedown_showHide();return false;">Try it</a>
</div>
<div id="dhtmlgoodies_contentBox">
<div id="dhtmlgoodies_content">
<!-- slide down content goes here -->
Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.<br><br>
<!-- End slide down content -->
</div>
</div>
</div>

<script type="text/javascript">
setSlideDownSpeed(4);
</script>