I want this to work EXACTLY like Facebook, so that when you click in the "Write a comment..." input field and it makes your photo and COMMENT button appear. Viewing their source doesn't help me. Here are my divs, but I would like some help with the javascript to go with it. Thanks!

Code:
<!-- DIV 1 - SHOWS BY DEFAULT -->
										<div>
										<tr>
											<td class="content" valign="top"><img src="images/spacer.gif" alt="" width="17" height="1" border="0">&nbsp;&nbsp;</td>
											<td valign="top">
											
												<table width="100%" border="0" cellspacing="0" cellpadding="0" class="comment">
													<tr>
														<td valign="top"><input type="text" name="writecomment" id="writecomment" value=" Write a comment..." style="margin: 0px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; padding-top: 0px; color: #8B807B; width: 400px; height: 17px; border: solid 1px;"></td>
													</tr>
												</table>
												
											</td>											
										</tr>
										</div>
										
										<tr>
											<td colspan="2"><img src="images/spacer.gif" alt="" width="1" height="1" border="0"></td>
										</tr>

										<!-- DIV 2 - SHOULD REPLACE DIV 1 WHEN INPUT FIELD WITHIN DIV 1 IS CLICKED -->
										<div style="display: none;">
										<tr>
											<td class="content" valign="top"><img src="images/spacer.gif" alt="" width="17" height="1" border="0">&nbsp;&nbsp;</td>
											<td valign="top">
											
												<table width="100%" border="0" cellspacing="0" cellpadding="0" class="comment">
													<tr>
														<td valign="middle"><img src="images/friendpic1_sm.jpg" alt="" width="25" height="25" border="0"></td>
														<td valign="middle" width="100%"><input type="text" name="writecomment" id="writecomment" value=" Write a comment..." style="margin: 0px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; padding-top: 0px; color: #8B807B; width: 400px; height: 17px; border: solid 1px;"></td>
													</tr>
													<tr>
														<td valign="top"><img src="images/spacer.gif" alt="" width="25" height="25" border="0"></td>
														<td valign="top"><a href="#" onclick="javascript:window.close()" onMouseOver="rollImage(button_submit_on,'submit')" onMouseOut="rollImage(button_submit_off,'submit')"><img src="images/button_submit_off.gif" alt="submit" title="submit" name="submit" id="submit" width="57" height="22" border="0"></a></td>
													</tr>
												</table>
												
											</td>											
										</tr>