« »

This code uses both CSS to design description content and JavaScript to perform the toggle effect for the links, users click the link to drop it down, click again to close. Excellent when you want to present information and not have to worry about popup blockers.

Label: dropdown, description, toggle, CSS, design, description content, perform, information

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<style type="text/css">
#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;
}
</style>

Copy All x2

<script type="text/javascript" name="dropDown.js">
// 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;
}
</script>

Copy All x2

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