<style type="text/css"> #coverlogin{ width: 320px; height: 0.1em; overflow:hidden; visibility: hidden; } #loginbox{ width: 300px; height: auto; border: 1px solid red; background-color: #FFCCFF; color:black; } </style> <script type="text/javascript"> var hh=0; var inter; //we show the box by setting the visibility of the element and incrementing the height smoothly function ShowBox() { //Depending on the amount of text, set the maximum height here in pixels if(hh==80) { clearInterval(inter); return; } obj = document.getElementById("coverlogin"); obj.style.visibility = 'visible'; hh+=2; obj.style.height = hh + 'px'; } //same way as above but reversed function HideBox() { obj = document.getElementById("coverlogin"); if(hh==2) { obj.style.visibility = 'hidden'; obj.style.height = '0.1em'; clearInterval(inter); return; } hh-=2; obj.style.height = hh + 'px'; } </script>

<!-- set an interval for the increment of the height by clicking onto this link --> <a href="#" onclick="inter=setInterval('ShowBox()',3);return false;">คลิ๊กที่นี่เพื่อแสดงข้อความ</a> <div id="coverlogin"> <div id="loginbox"> ใส่ข้อความที่ต้องการได้ครับ <br> <p align="right"><a href="#" onClick="inter=setInterval('HideBox()',3);return false;">ปิดกล่อง</a></p> </div> </div>