Jquery用户界面滑动和向下滑动

我正忙着通过点击按钮来显示和隐藏一些框。它运行良好，但我必须点击2次，第一次我想隐藏一个框

这是我的JS代码：

$(function() {
    $('.title .hide').showContent();
});

$.fn.showContent = function() {
    return this.each(function() {
        var box = $(this);
        var content = $(this).parent().next('.content');

        box.toggle(function() {
            content.slideDown(400);
        }, function() {
            content.slideUp(400);
        });

    });
}; 

和反HTML

<div class="box">
    <div class="title">
        Title
        <span class="hide"></span>
    </div>
    <div class="content">Content</div>
</div>

标题
内容

为什么会这样？有人能帮我吗

下面是一个演示：（单击黑色按钮。第一次单击时，它什么也不做，但第二次单击时，内容将崩溃。）

反转您的功能

box.toggle(function() {
  content.slideUp(400);
}, function() {
  content.slideDown(400);
});

---

@Maanstraat您在HTML中提到的按钮在哪里？按钮是隐藏类的范围：我制作了一个JSFIDLE来：