$(function(){

	/* Variables to set */
	var id = '#heightCheck';
	var click_element = 'h2';
	var height_value = '100';
	var tall_menu_speed = 400;
	var short_menu_speed = 250;
	
	/* System variables, don't change */
	var target = id +' '+ click_element;
	var menu_content = $(target).next();
	
	/* Hide the element after the click_element, whether it's a
	div, p, ul, whatever you choose to wrap the items in */
	menu_content.hide();
	
	$(target).toggle(function(){
		/* save the menu items in a variable */
		var this_menu = $(this).next();
		
		/* get the menu height and save it */
		var menu_height = this_menu.height();
		
		/* Calculate the animation speed based on the element height */
		/* if the height is greater than the height set above use the 
		tall menu height */
		if(menu_height > height_value){
			var speed = tall_menu_speed;
		
		/* If it's smaller, use the short menu height */
		} else if(menu_height < height_value) {
			var speed = short_menu_speed;
		}
		
		/* slide the menu down */
		this_menu.slideDown(speed);
			
	},function(){
		/* this is the same but reversed to close the menu */
		var this_menu = $(this).next();
		var menu_height = $(this).next().height();

		/* Calculate the animation speed based on the element height */
		if(menu_height > height_value){
			var speed = tall_menu_speed;
		} else if(menu_height < height_value) {
			var speed = short_menu_speed;
		}
		this_menu.slideUp(speed);

	});

});