[Amphiluke]

<div><a href="javascript:col()" id="tit">Скрыть</a></div>
	<div id="div" style="margin: 0px 15px; border:1px solid; padding:12px; overflow:hidden;">
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	   много текста<br/>
	</div>
<script type="text/javascript">
  var div = document.getElementById("div");
        
function col(){
    var step = 1;
    if (div.clientHeight >= step){
        div.style.height = div.clientHeight-1-24+"px";
        setTimeout("col()",10);
    }
}
</script>

Если вы проанализируете, что происходит, то поймете, почему так. Вы анимируете уменьшение по 1px только значения высоты, а padding`и остаются постоянной величиной. Поэтому ваш код будет себя неправильно вести, когда менюха свернется до нулевой высоты, точнее по достижении нулевого значения div.style.height. При этом ваш код, который считывает по таймеру значение свойства clientHeight, будет пытаться далее уменьшать высоту в отрицательные области, поскольку наличие постоянных padding`ов не даст свойству clientHeight уменьшаться до значений меньших суммы paddingTop + paddingBottom.
Если вы откроете консоль, то увидите, как растет число ошибок CSS, при попытке установки отрицательной высоты.
Чтобы этого избежать, вам так же надо останавливать анимацию по достижении высоты 24px или же анимировать уменьшение padding`ов, как это делает jQuery.


P.S. Еще раз повторю, если с первого раза было непонятно:
div.style.height = clientHeight − paddingTop − paddingBottom