可扩展的可折叠DIV列表

Question

我有 fiddle ，我一直在努力

如果你展开列表，它的效果很好，但是 如果您折叠列表，则竞争会在网格右侧闪烁。

如何阻止这种情况发生？

以下是Jquery代码的片段

$(".header").click(function () {
    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
        $content.slideToggle(200, function () {
            $('.contentCol', this).fadeToggle(400);

    });
});

解决 的 FIDDLE

Answer 1

将float:left;添加到 .content 以使其在调整大小时保持位置。

.content{
   float:left; 
}

http://jsfiddle.net/gad27q4b/2/

Answer 2

只需将其添加到css

即可

.header,.content{
    overflow: hidden;
    clear: both;
}  

此处的工作示例http://jsfiddle.net/gad27q4b/3/