[Gosha]

Здравствуйте, товарищи. Я программист, но в жаваскриптах не силен. Задумал одну простенькую вещь. Логически понимаю, как это сделать, но реализовать программно не получается. Прошу вашей помощи.

По задумке, имеется на странице список ссылок. При нажтии на одну, под ней расскроется соответствующий блок с некоторым содержимым, который подгружается AJAXом из PHP скрипта. С этим проблем не возникло. Дальше я решил подключить функцию, которая развернет соответствующий див плавно. И это тоже сделал. Все работает, если картинки в нем закэшированы. А если нет, див открывается на высоту, равную надписи alt'а изображения, пока она еще не загружена. А когда полностью появляется, оказывается за рамками, разрушая всю верстку.

Дальше по задумке, нужно так же плавно сворачивать див, при нажатии на ссылку повторно. Но не удалять его содержимое, чтобы при уже следующем клике, див раскрылся без повторной подгрузки контента из PHP.

Вот имеется следующие блоки

<div class="topic_block">
<a href="#" onclick="topic('1', 'monkey'); return false;">Текст</a>
</div>
<div class="big_topic" id="monkey"></div>


<div class="topic_block">
<a href="#" onclick="topic('2', 'parrot'); return false;">Текст</a>
</div>
<div class="big_topic" id="parrot"></div>

...


<div class="topic_block">
<a href="#" onclick="topic('3', 'dog'); return false;">Текст</a>
</div>
<div class="big_topic" id="dog"></div>

И имеется такой жаваскрипт

function topic(a, b) {
//Тут блок должен свернуться, если он открыт
	if (($("#"+b).text() !== '') && ($("#"+b).css("height") !==0)) {
		$("#"+b).css("overflow", "hidden");
		$("#"+b).animate({height: 0}, 500);
		return;
	}
//Тут блок должен развернуться, если он закрыт, но в нем есть контент
	if (($("#"+b).text() !== '') && ($("#"+b).css("height") ==0)) {
		$("#"+b).css("overflow", "hidden");
		$("#"+b).animate({height: $("#"+b)[0].scrollHeight}, 500);
		return;
	}
//А тут выполняется код, если блок пустой и закрытый
	$("#"+b).css("height", "0px");
	$("#"+b).css("overflow", "auto");
	$("#"+b).html("Загрузка...");
	$.ajax({
		type: "POST",
		url: "doit.php",
		data: "id="+a, 
		success: function(msg){
			$("#"+b).html(msg);
			$("#"+b).animate({height: $("#"+b)[0].scrollHeight}, 500);
		}
	});
}

Проблема еще возникает, когда блок сворачивается. Сначала все нормально. Но как тлько анимация завершится, картинка тут же вылезает за края нулевопиксельного блока во всю высоту, опять же ломая верстку. Подскажите, пожалуйста, что подправить. И как можно оптимизировать мой чайниковый код. Который я писал, основываясь на знаниях ООП