以下所有文字仅为IMHO：）
请在此处查看我的示例-http://jsfiddle.net/XUjAH/99/
HTML格式：

<p id="click-meopen">click me to open</p>
<p id="click-meclose">click me to close</p>
<div id="this">
    <div id="content">here<br />is<br />a<br />bunch<br />of<br />content<br />sdf</div>
</div>

至于JS：

$('#click-meopen').click(function() {
    $("#this").height($("#content").height());

});
$('#click-meopen').click();

$('#click-meclose').click(function() {
    $("#this").height('0');
});​

至于CSS，它应该和您所拥有的一样。

UPD：看起来动画有点古怪-当您将"高度：auto' - div从一开始就是可见的，但是关闭按钮在第一次点击时会忽略动画（我有最新更新的Chrome），所以我添加了一些解决方法。还添加了其他样式来支持其他浏览器（如Firefox和Opera）的动画，而不仅仅是支持-webkit的浏览器。

http://jsfiddle.net/XUjAH/110/
在CSS中添加了类并从主样式中删除了“transition”：

.with-animation {
    -webkit-transition: height 1s ease-in-out;
    -moz-transition: height 1s ease-in-out;
    -o-transition: height 1s ease-in-out;
    transition: height 1s ease-in-out;
}

在JS：//然而我们的div已经有适当的大小这一行//防止即时关闭第一次点击，不知道为什么$（“#container”）.height（$（“#content”）.height（））;

$('#click-meopen').click(function() {
    $("#container").height($("#content").height()); 
});

$('#click-meclose').click(function() {
    // If we add class with-animation on upper level div will
    // start animation on page load
    $("#container").height('0').addClass("with-animation");
});

如果可以使用toggle，则只需使用$("#this").toggle('slow');，但必须将height: 0;替换为display: none;

$('#click-meopen').click(function() {
    $('#this').show();
});

$('#click-meclose').click(function() {
    $('#this').hide();
});​

http://jsfiddle.net/XUjAH/95/
或带切换

$('#click-meopen').click(function() {
    $('#this').toggle();
});

http://jsfiddle.net/XUjAH/96/

您正在尝试将此更改为按钮？

<input type="submit" id="click-meopen" value="open"></input>
<input type="submit" id="click-meclose" value="close"></input>
<div id="this">here<br />is<br />a<br />bunch<br />of<br />content<br />sdf</div>

这并不难做到。
我还建议您使用jQuery的.toggle()或.show(),.hide()方法，仅仅将css height属性设置为零并不是一个好的做法。
您要在页面载入时或完成载入时（DOM就绪）显示div吗？
您的JavaScript代码将是：

$('#click-meopen').click(function() {
    $('#this').show(); // or .toggle()
});

$('#click-meclose').click(function() {
    $('#this').hide(); // or .toggle()
});​

如果你只想使用一个按钮，你应该使用.toggle()方法，否则坚持使用.show(),.hide()方法！
当DOM准备就绪时（页面已完全加载）：

$(document).ready(function(){
     $('#this').show();
});

所用方法的文档：

• http://api.jquery.com/show/
• http://api.jquery.com/hide/
• http://api.jquery.com/toggle-event/
• http://api.jquery.com/ready/

我看到你已经使用了-webkit-transition，它在chrome中对我有效，但我猜你希望它在webkit之外的其他浏览器中有效。
有两种方法我可以建议，一是只是简单地添加-moz-transition: height 1s ease-in-out;和transition: height 1s ease-in-out;做它与css3，但这不会帮助在旧的ie浏览器。
另一种方法是在要折叠的div中的文本内放置一个div：

<div id="this">
    <div id="height">
         text
         text
     </div>
</div>

然后在javascript中你可以得到内部div-element的高度，这样你就可以用animate代替height：自动

$('#click-meopen').click(function() {
    $('#this').animate({'height': $('#height').height()}, 1000);
});

$('#click-meclose').click(function() {
    $('#this').animate({'height': 0}, 1000);
});

这对你来说应该足够了。

$('#click-meopen').click(function() {
        $("#this").css({'position':'absolute','visibility':'hidden','height':'auto'});
        var newHeight = $("#this").height();
        $("#this").css({'position':'static','visibility':'visible','height':'0'});
        $('#this').css('height',newHeight + 'px');
    });

    $('#click-meclose').click(function() {
        $('#this').css('height','0');
    });

    $('#click-meopen').click();

http://jsfiddle.net/XUjAH/100/