March 14th, 2006
DHTML: Slide advanced options open/closed
This full code will enable you to display or hide a section/div in a smooth sliding way instead of just popping open or closed. You can see this script in action at DentalWebConnect.com
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
#search_form {
width: 450px;
border: 1px solid #666;
background: #9999CC;
padding: 10px;
}
#search_advanced {
background:#3399FF;
height: 0px;
overflow:hidden;
display: none;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
var currentHeight = null;
function displayAdvanced() {
var maxHeight = 150; //max height of advanced search elements
var minHeight = 0;
var increment = 10; // how many pixels to increase/decrease by
var timespan = 40; //how many milliseconds between each change
var f = document.search_form;
var show = f.adv_check.checked;
var adv = document.getElementById("search_advanced");
if (currentHeight==null) currentHeight = show ? minHeight : maxHeight;
var atHeight = show ? (currentHeight >= maxHeight) : (currentHeight <= minHeight);
if(atHeight) {
if(!show) adv.style.display = 'none';
return;
} else {
adv.style.display = 'block';
currentHeight = show ? (currentHeight += increment) : (currentHeight -= increment);
adv.style.height = currentHeight + 'px';
setTimeout(displayAdvanced, timespan);
}
}
//-->
</script>
</head>
<body>
<div id="search" align="center">
<form id="search_form" name="search_form">
<div id="search_basic"><input type="text" class="text" id="zip" /><input type="submit" /><input type="checkbox" id="adv_check" onclick="displayAdvanced();" /><label id="lblAdvanced" for="adv_check">advanced</label></div>
<div id="search_advanced"><select size="4" id="language"></select><select size="4" id="specialty"></select><br />
<input type="text" id="name" />
</div>
</form>
</div>
