Auto height of container after hover on

HTML

<div id="div1" style="height:20px;">
    Test<hr />
    text text <br />
    text text <br />
    text text <br />            
</div>

CSS

body,td,th {
    font-size: 12px;
}
#div1 {
    position:absolute;
    right:30px;
    bottom:0px;
    border:1px solid #ff0000;
    overflow:hidden;
}

JavaScript

$(document).ready(function rt() {
    $("#div1").onclick(
    function() {
        $('#div1').animate({ 'height': $('#div1')[0].scrollHeight }, "fast")
                  .promise().done(function () {
                       $('#div1').height('auto');
                   });
    }, function() {
        $('#div1').animate({
            "height": "20px"
        }, "fast");
    });
});