foo.html

<!-- markup structure -->

<table>
  <tbody>
    <tr>
      <td>*CONTENT ONE*</td>
      <td>*CONTENT TWO*</td>
    </tr>
  </tbody>
</table>


<!--
situation begins with content one visible and content two invisible. The <td>'s are right-justified, therefore we have the following

+-----+--+
|     |C1|
+-----+--+


When C1 is clicked, it animates away and content two is displayed. However, content two becomes visible before c1 disapears completely, leading to this scenario:

+------+--+--+
|      |C1|C2|
+------+--+--+

for about 1 second before it finishes at

+---------+--+
|         |C2|
+---------+--+

I need a way to hide C1, but only for that one second. Also I can only change the css. And some changes will not be applied, but I'm not sure which. display:none seems to work