Full version: jsB@nk » Link » Tooltip » Dropdown Description Toggle
URL: https://www.javascriptbank.com/dropdown-description-toggle.html
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.
Full version: jsB@nk » Link » Tooltip » Dropdown Description Toggle
URL: https://www.javascriptbank.com/dropdown-description-toggle.html
<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><script type="text/javascript" name="dropDown.js">// Created by: Alf Magne Kalleland :: http://www.dhtmlgoodies.com//************************************************************************************************************(C) www.dhtmlgoodies.com, September 2005Terms 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 scriptvar slidedownTimer = 7; // Lower value = faster scriptfunction 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><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>