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.

LVL 16
s8webAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

 
hieloCommented:

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

0
 
s8webAuthor Commented:
Thanks Hielo, that's great! Is there any way that I can place a trigger outside the div?
0
 
hieloCommented:
>>Is there any way that I can place a trigger outside the div?
English please!
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
hieloCommented:
is this what you want?
<?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);
						  $('#trigger').bind('click',function(){
                                        $('#myDiv').animate({height:'800px'},1500)
                                });
                        });
                </script>
        </head>
        <body>
	   		<span id='trigger'>Trigger</span>
                <div id="myDiv">Hello</div>     
        </body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by ConnectWise

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
 
s8webAuthor Commented:
Thanks Hielo, that's exactly what I want.
0
 
s8webAuthor Commented:
Thanks Again!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.