html - JQuery 滑动/切换效果崩溃

Question

我已经完成了以下 HTML 1row-table，它具有使用 jQuery 制作的滑动/切换效果。单击左侧的紫色单元格（单元格#1）可以显示隐藏的内容。

http://jsfiddle.net/jrick/6r5de/2/

我需要解决的问题：

• 点击后黄色单元格神秘消失，如何避免？

• 然后我想在下面添加更多行，效果与第一行相同。我自己试过，但是当滑下隐藏的黄色单元格时，紫色的单元格一个重叠，行对齐被打乱了。这就是它发生的情况：

http://jsfiddle.net/jrick/uv68r/5/

但它在展开状态下应该或多或少像这样：

    -----------------------------------------
   | Cell #1| hidden content                 |
    --------| This content should be visible | 
            | hidden content                 | 
            | hidden content                 | 
    ----------------------------------------- 
   | Cell #2| hidden content                 |
    --------| This content should be visible | 
            | hidden content                 | 
            | hidden content                 | 
             --------------------------------