my own accord script

[Phil Jackson]

Howdy do. I have the following code which, all works apart from setting height when clicked on. error: object is indefined

anyonw know where im going wrong?

// JavaScript Document
// Created by ACT WEb Designs
// http://www.actwebdesigns.co.uk
//
//<div id="reportWrapper">
//	<div class="dropDiv">
//		<p><a class="open">open me</a></p>
//		<p> blablabla blablabla</p>
//		<p><a class="close">close me</a></p>
//	</div>
//	<div class="dropDiv">
//		<p><a class="open">open me</a></p>
//		<p> blablabla blablabla</p>
//		<p><a class="close">close me</a></p>
//	</div>
//</div>

	function dropBox() {
		function anchorReplace()
		{
			$("a[class=open]").each(function(i){
				var anchorElement = $(this);
				var newAnchorElement = $('<a href="#link' + i + '" class="' + anchorElement.attr('class') + '" name="#link' + i + '">' + anchorElement.text() + '</a>').insertBefore(anchorElement);
					anchorElement.remove();
			});
			$("a[class=close]").each(function(i){
				var anchorElement = $(this);
				var newAnchorElement = $('<a href="#link2' + i + '" class="' + anchorElement.attr('class') + '" name="#link2' + i + '">' + anchorElement.text() + '</a>').insertBefore(anchorElement);
					anchorElement.remove();
			});
		}
		function giveDivName() //simply add name attribute to div element
		{
			$("div[class=dropDiv]").each(function(i){ //foreach div with class dropDiv
				var divElement = $(this);
				var newDivElement = $('<div class="dropDiv" name="div' + i + '">' + divElement.html() + '</div>').insertBefore(divElement);
					divElement.remove();
			});	
		}
		function getOrigValues() //get the values before closing div 
		{
			var boxInfo = []; //get original div height
			$("div[class=dropDiv]").each(function(i){	
				var height = $(this).height(true);
				var name = $(this).attr("name");
				var obj = { boxHeight: height, boxName: name };
				return  boxInfo.push(obj);
			});	
			$("div[class=dropDiv]").css("height", "27px"); //close all dropDiv's
		}
		
		anchorReplace();
		giveDivName();
		var boxInfo = getOrigValues();
		
		$("#reportWrapper div").css("overflow", "hidden");
		$("a[class=close]").bind("click", function(){
			$(this).parents("div:eq(0)").animate({
				height: '30px'
			}, 1000);					 
		});
		$("a[class=open]").bind("click", function(){
			var clicked = $(this);
			$("a[class=open]").each(function(){	
				if( clicked.attr("name") !== $(this).attr("name") )
				{
					$(this).parents("div:eq(0)").animate({
						height: '30px'
					}, 1000);
				}
				else
				{
					var element = $(this);
					function getNewHeight(element, boxInfo) // get the height for when clicked to open
					{
						var divName = element.parents("div:eq(0)").attr("name");
						$.each(boxInfo,function(i,n) {
							if( n.boxName == divName )
							{
								var newHeight = n.boxHeight;
							}
						});
	
					}
					getNewHeight(element, boxInfo);
					clicked.parents("div:eq(0)").animate({
						height: newHeight + 'px'
					}, 1000);
				}
			});
		});
	}

[Phil Jackson]

narrowed it down a bit:

var element = $(this);
var divName = element.parents("div:eq(0)").attr("name");
$.each(boxInfo,function(i,n) {
    if( n.boxName == divName )
    {
        var newHeight = n.boxHeight;
    }
});

clicked.parents("div:eq(0)").animate({
    height: newHeight + 'px'
}, 1000);

Problem being "newHeight undefined". But if i do this:

var element = $(this);
var divName = element.parents("div:eq(0)").attr("name");
$.each(boxInfo,function(i,n) {
    if( n.boxName == divName )
    {
        var newHeight = n.boxHeight;
        alert(newHeight); // output being 230
    }
});

clicked.parents("div:eq(0)").animate({
    height: newHeight + 'px'
}, 1000);

it returns the height. How is it that 5 lines down the variable is undefined??

[Phil Jackson]

sussed it

                                        var element = $(this);
					var divName = element.parents("div:eq(0)").attr("name");
					$.each(boxInfo,function(i,n) {
						if( n.boxName == divName )
						{
							var newHeight = n.boxHeight;
							clicked.parents("div:eq(0)").animate({
								height: newHeight + 'px'
							}, 1000);
						}
					});