div stretch and restore -- toggle
hi m trying to show few contents in the div , when somebody clicks over the link a div will come up , but the div strectches first and the restore to its size ,
the code is out her
<script>
function showDetails(id) {
$('.' + id + '').toggle(200);
}
</script>
//html code
<table >
<s:iterator value="candidateList">
<tr>
<td width="100">
<div >
<a style="cursor: pointer" id="<s:property value="id"/>"
onclick="showDetails(this.id)"> <s:property value="email" />
</a>
</div>
</td>
</tr>
<tr>
<td>
<div class="<s:property value="id"/>"
style="display: none; background-color: aqua "><a
id="<s:property value="id" />earningDetails" style="cursor: pointer"
onclick="showDetails(this.id)"> <s:property value="id" />hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</a>
</div>
</td>
</tr>
<tr>
<td>
<div class="<s:property value="id"/>earningDetails"
style="display: none; background-color: lime;width: 500"><s:property
value="id" /></div>
</td>
</tr>
</s:iterator>
</table>
////////////////////
please see whats wrong- also the problem is in chrome, but not in IE