Link to home
Start Free TrialLog in
Avatar of s8web
s8web

asked on

Toggle Div Based On Height Not Show/Hide Div

I'm looking for a way to expand / collapse a div based on height.

For example, on page load 300px of the height of a div is visible, then on click expand to 800px. Using two separate containers for this isn't an option.

A smooth jquery solution would be optimal but not necessary.

Avatar of hielo
hielo
Flag of Wallis and Futuna image

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>hielo</title>
		<style type="text/css">
		#myDiv{background-color:khaki;}
		</style>

		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
		<script>
			$(function(){
				$('#myDiv').animate({height:'300px'},1500).bind('click',function(){
					$(this).animate({height:'800px'},1500)
				});
			});
		</script>
	</head>
	<body>
		<div id="myDiv">Hello</div>	
	</body>
</html>

Open in new window

Avatar of s8web
s8web

ASKER

Thanks Hielo, that's great! Is there any way that I can place a trigger outside the div?
Avatar of hielo
hielo
Flag of Wallis and Futuna image
>>Is there any way that I can place a trigger outside the div?
English please!
ASKER CERTIFIED SOLUTION
Avatar of hielo
hielo
Flag of Wallis and Futuna image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of s8web
s8web

ASKER

Thanks Hielo, that's exactly what I want.
Avatar of s8web
s8web

ASKER

Thanks Again!