Bug Tracker

Ticket #4661: toggleTableRowInIE8.html

File toggleTableRowInIE8.html, 1.3 KB (added by mz, May 15, 2009 12:35PM UTC)

Test case for this bug

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>Test case for $().toggle() bug in IE8</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		
		<style>
			table, th, td {
				border: 1px solid;
				border-collapse: collapse;
			}
		</style>
		
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
		<script type="text/javascript">
			$(function() {
				
				$('a[id^=expand_]').click(function(e) {
					e.preventDefault();
					
					var eltID = this.id.slice(7);
					$('#' + eltID).toggle();
				});
				
			});
		</script>
	
	</head>
	
	<body>
		
		<p>Click on the link to toggle the #help_row &lt;tr&gt; element</p>
		<table cellspacing="1" cellpadding="0" class="blocCadre cadreView">
			<tr>
				<th colspan="3">My Awesome Table (<a href="#" id="expand_help_row">Help</a>)</th>
			</tr>
			<tbody>
				<tr id="help_row">
					<td colspan="3">Lorem ipsum dolor sit amet...</td>
				</tr>
				<tr><td>One</td><td>Two</td><td>Three</td></tr>
				<tr><td>One</td><td>Two</td><td>Three</td></tr>
				<tr><td>One</td><td>Two</td><td>Three</td></tr>
			</tbody>
		</table>
		
	</body>
</html>

Download in other formats:

Original Format