jQuery簡單實現div層的放大與縮小

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .content
        {
            border: 1px solid #ccc;
            width: 440px;
            overflow: hidden;
            margin: 10px;
        }
    </style>

    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            if ($('#content').height() > 400)
                $('#content').height(400);
            $('#bigger').toggle(function() {
                $('#content').height($('#content').height() + 100);
                $('#bigger').html('縮小');
            }, function() {
                $('#content').height($('#content').height() - 100);
                $('#bigger').html('放大');
            })
        });
    </script>

</head>
<body>
    <div id="content" class="content">
        內容1<br />
        內容2<br />
        內容3<br />
        內容4<br />
        內容5<br />
        內容6<br />
        內容7<br />
        內容8<br />
        內容9<br />
        內容10<br />
        內容11<br />
        內容12<br />
        內容13<br />
        內容14<br />
        內容15<br />
        內容16<br />
        內容17<br />
        內容18<br />
        內容19<br />
        內容20<br />
        內容21<br />
        內容22<br />
        內容23<br />
        內容24<br />
        內容25<br />
    </div>
    <br />
    <span id="bigger">放大</span>
</body>
</html>