Hause

Сделал как вы сказали, но анимация работает также: При нажатии на элемент, расширяющийся в любом направлении, он возвращается в начальное положение (progress=0), а затем расширяется до положения (progress = 1).

Не хочу разбирать этот огромный кусок кода

Я выложил весь код на всякий случай) А ключевую роль здесь играет функция animate.

Всё, я сумел разобраться.)) Но всё равно большое спасибо за помощь. Не буду описывать принцип его действия, но для тех, кому будет интересно как я решил эту проблему, я оставляю здесь свой код, хотя я не гарантирую что он идеален)):

var arr_timer=[];
var arr_progress=[];
var arr_id=[];
function animate (object) {	
var arg;
clearInterval(arr_timer[object.id]);
if (!arr_progress[object.id]) arr_progress[object.id] = 0;
if (!arr_id[object.id]) arr_id[object.id] = 0;
if (arr_progress[object.id] >= 1) arr_progress[object.id] = 0;
arr_id[object.id]++;
if(arr_id[object.id] > 1) arr_id[object.id]=0;
var start = new Date;	
arr_timer[object.id] = setInterval(function () {
	arr_progress[object.id] += (new Date - start) / 2000;
	if (arr_id[object.id] === 1) {	
	arg = arr_progress[object.id];
	} 
	else {	
	arg = 1-arr_progress[object.id];	
	}
	if (arg >= 1) arg = 1;
	if (arg <= 0) arg = 0;
    object.step(arg);
    if (arg === 1||arg === 0) {	
	clearInterval(arr_timer[object.id]);
	}	
}, 20);
}

if(document.getElementsByClassName) {
	 
	    getElementsByClass = function(classList, node) {   
	        return (node || document).getElementsByClassName(classList)
	    }
	 
	} else {
	 
	    getElementsByClass = function(classList, node) {           
	        var node = node || document,
	        list = node.getElementsByTagName('*'),
	        length = list.length, 
	        classArray = classList.split(/\s+/),
	        classes = classArray.length,
	        result = [], i,j
	        for(i = 0; i < length; i++) {
	            for(j = 0; j < classes; j++)  {
	                if(list[i].className.search('\\b' + classArray[j] + '\\b') != -1) {
	                    result.push(list[i])
	                    break
	                }
	            }
	        }
	     
	        return result
	    }
	}
var elem = getElementsByClass("showpanel");
for (var i = 0; i < elem.length; i++) {
elem[i].addEventListener("click", function(e) {
	return function(i) {
	animate({	
	id: e,
	step: function (arg) {
		elem[e].style.height = 50 + arg*500 + "px";
	},
	})}}(i), false);
}