html - JQuery のスライド/トグル効果がクラッシュする

Question

jQueryで作成されたスライド/トグル効果を持つ次のHTML 1row-tableを実行しました。非表示のコンテンツは、左側の紫色のセル (セル #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                 | 
             --------------------------------