Nailya,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#wrap{overflow:hidden;}
#wrap pre{
margin:0 -170px;
padding-top:10px;
}
#wrap .pic{
width:284px;
padding:3px 0;
background:pink;
text-align:center;
}
#wrap #Inner{
width:284px;
background: url("PodborBlock/innerBack.png") repeat-y;
}
</style>
<script>
window.onload = function(){
var obj = document.getElementById('Inner');//разворачиваемый див
var height = obj.scrollHeight ;//получение текущей высоты дива с id="Inner"
var objWarpHeight = document.getElementById('warpHeight');//скрытый див
objWarpHeight.innerHTML = height;//вставка высоты в скрытый див
obj.style.height = 0 + "px";//при загрузке обнуляет высоту
}
function move_obj(id,mt,mts)
{
var obj = document.getElementById(id);
var height = obj.clientHeight;
if (mt == 10000 && height == 0)//при условии, если высота равна 0, то разворачивает див
{
var objWarpHeight = document.getElementById('warpHeight');//передаем высоту из скрытого дива
mt = objWarpHeight.innerHTML;//в переменную mt передается значение высоты
}
if (mt == 10000 && height != 0)//при условии, если высота не равна 0, то сворачивает див
{
mt = 0;
mts = mts*(-1);
}
if ((height < mt && mts > 0 )||(height > mt && mts < 0 ))
{
height = height+mts;
obj.style.height = height + 'px';
// Ниже запускаем тайм аут в 1 мс, после чего перезапускаем фунvкцию.
// Функция перезапускается до тех пор, пока выполняется условие.
window.setTimeout(function(){move_obj(id,mt,mts)}, 1);
}
}
</script>
</head>
<body> <div id="warpHeight"></div>
<div id="wrap">
<div class="pic" onClick="move_obj('Inner',10000,5)">ещё компоненты</div><!--клик-->
<div id="Inner">
<pre>
<input type="checkbox" name="3" value="yes" checked> Виноград
<input type="checkbox" name="4" value="yes" checked> Ананас
<input type="checkbox" name="7" value="yes" checked> Апельсин
<input type="checkbox" name="3" value="yes" checked> Виноград
<input type="checkbox" name="4" value="yes" checked> Ананас
<input type="checkbox" name="7" value="yes" checked> Апельсин
<input type="checkbox" name="4" value="yes" checked> Шоколад
<input type="checkbox" name="4" value="yes" checked> Каша
<input type="checkbox" name="7" value="yes" checked> End
</pre>
</div>
</div><!--end #wrap-->
</body>
</html>