rajeshg/gist:298183

## gistfile1.htm
<html>
<head>
	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js'></script>
	<style type='text/css'>
		body {
			margin: 0 auto;
			width: 900px;
			padding-top: 100px;
		}
		#one , #two{
			width: 150px;
			position: relative;
			border: 2px solid black;
		}
		#two{ display: none; }
	</style>
	<script type='text/javascript'>
		$(document).ready(function() {
			$containerDiv = $('#one');
			$('#one').click(function() {
				var one_height = parseInt($('#one').height()) + parseInt($('#one').css('border-top-width')) +
				parseInt($('#one').css('border-bottom-width'));
				var two_height = parseInt($('#two').height()) + parseInt($('#two').css('border-top-width')) +
				parseInt($('#two').css('border-bottom-width'));
				if(newUIPos()){
					if($('#two:visible').length > 0) {
						$('#two').hide();
						$('#two').css('top','0px');
					} else {
						$('#two').hide().css({'height': 0, 'top':'-'+one_height+'px'}).show().animate({'height': two_height, 'top':'-='+two_height+'px'}, { duration: 'slow', 'specialEasing': 'easeOut'});
					}
				} else {
					$('#two').slideToggle();
				}
			});

	    //decide if to place the new list above or below the drop-down
            function newUIPos(){
                var containerPosY = $containerDiv.offset().top,
                docHeight = jQuery(window).height(),
                scrollTop = jQuery(window).scrollTop();
                //if height of list is greater then max height, set list height to max height value
		var newUIHeight = $('#two').height();
                containerPosY = containerPosY-scrollTop;
                if (containerPosY+newUIHeight >= docHeight){
					console.log('#two should appear above');
					return true;
                } else {
					console.log('#two should appear below');
					return false;
                }
            }

		});
	</script>
</head>
<body>
	<div id='one'>
		div id one content
	</div>
	<div id='two'>
		div id two content
		<ul>
			<li>Campaign 1 </li>
			<li>Campaign 2 </li>
		</ul>
	</div>
</body>
</html>
	<html>
	<head>
	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js'></script>
	<style type='text/css'>
	body {
	margin: 0 auto;
	width: 900px;
	padding-top: 100px;
	}
	#one , #two{
	width: 150px;
	position: relative;
	border: 2px solid black;
	}
	#two{ display: none; }
	</style>
	<script type='text/javascript'>
	$(document).ready(function() {
	$containerDiv = $('#one');
	$('#one').click(function() {
	var one_height = parseInt($('#one').height()) + parseInt($('#one').css('border-top-width')) +
	parseInt($('#one').css('border-bottom-width'));
	var two_height = parseInt($('#two').height()) + parseInt($('#two').css('border-top-width')) +
	parseInt($('#two').css('border-bottom-width'));
	if(newUIPos()){
	if($('#two:visible').length > 0) {
	$('#two').hide();
	$('#two').css('top','0px');
	} else {
	$('#two').hide().css({'height': 0, 'top':'-'+one_height+'px'}).show().animate({'height': two_height, 'top':'-='+two_height+'px'}, { duration: 'slow', 'specialEasing': 'easeOut'});
	}
	} else {
	$('#two').slideToggle();
	}
	});

	//decide if to place the new list above or below the drop-down
	function newUIPos(){
	var containerPosY = $containerDiv.offset().top,
	docHeight = jQuery(window).height(),
	scrollTop = jQuery(window).scrollTop();
	//if height of list is greater then max height, set list height to max height value
	var newUIHeight = $('#two').height();
	containerPosY = containerPosY-scrollTop;
	if (containerPosY+newUIHeight >= docHeight){
	console.log('#two should appear above');
	return true;
	} else {
	console.log('#two should appear below');
	return false;
	}
	}

	});
	</script>
	</head>
	<body>
	<div id='one'>
	div id one content
	</div>
	<div id='two'>
	div id two content
	<ul>
	<li>Campaign 1 </li>
	<li>Campaign 2 </li>
	</ul>
	</div>
	</body>
	</html>