IE Ignoring Toggle Function
I want to hide/show table rows with an onclick event. Here are the relevant snippets of code I have:
Script:
-
$(document).ready(function() {
$("#plan1-title").click(function() {
$("#plan1").toggle();
return false;
});
$("#close-button1").click(function() {
$("#plan1").hide();
return false;
});
});
HTML:
-
<tr onMouseOver="this.className='floorplans-over'" onMouseOut="this.className='floorplans-out'">
<td><a id="plan1-title" style="cursor:pointer;" href="#">Small Studio</a></td>
<td>Studio</td>
<td>1</td>
<td>$600-$650</td>
<td><a href="#">Check Availability</a></td>
</tr>
<tr id="plan1" style="display:none;">
<td class="hidden-td" colspan="5">
<img id="close-button1" style="float:right;margin:5px;" src="/img/close_green.gif" onmouseover="this.style.cursor='pointer'; this.src='/img/close_black.gif';" onmouseout="this.src='/img/close_green.gif';" />
<img src="http://images.forrent.com/imgs/fr/propertyFiles/996/058/1000/FP_12615102650911234.jpg" />
</td>
</tr>
It works in all browsers (Firefox, Safari, Chrome, and Opera), however not a single version of IE 6-8 will toggle the table row. Help is appreciated.
Thanks.