Collapsing and expanding a div to a set size

[formasfunction]

I've looked through and found quite a few bits of code for showing and hiding a div and this is along those lines but a bit different.

I'd like for a div to show the first two lines of text, lets say thats at a height of 50px, and then when a button is pressed the div expands to show the rest of the text which will be variably long. Basically I want to show a text preview before showing the entire passage. Whats the best way to go about that?

[hexburner]

Here's something to get you started.
IMO, it's long for what it does, so if I were you, I'd narrow it down a bit.

<style type="text/css">
    <!--
    div {
        overflow: hidden;
    }
    -->
</style>
<script language="javascript" type="text/javascript">
    <!--
    function collapse (id) {
        div = document.getElementById(id);
        div.style.height = '50px';
        btn = div.getElementsByTagName('a')[0];
        btn.href = "javascript:expand('"+id+"');";
        btn.innerHTML = 'Expand';
    }

    function expand (id) {
        div = document.getElementById(id);
        div.style.height = 'auto';
        btn = div.getElementsByTagName('a')[0];
        btn.href = "javascript:collapse('"+id+"');";
        btn.innerHTML = 'Collapse';
    }
    -->
</script>
<div id="testdiv" name="testdiv">
    <a href="javascript:collapse('testdiv');">Collapse</a>
    Lorem<br/>
    Ipsum<br/>
    blablabla...
</div>