DHTML Code

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

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image