Help with nested jQuery accordions

Hello.

I have a table (must be a table) where the row expands to reveal another row that also expands/collapses.

The problem is when I click on the sub-row to expand it the parent row collapses.

Here is my table:

<tr class="accordion">
	<td>
		<span></span><div class="head">Header 1</div>
	</td>
</tr>
<tr class="content">
	<td colspan="12">
		<table border="0" cellspacing="0" cellpadding="0" id="lit">
			<!-- panel -->
			<tr class="accordion">
				<td>
					<span></span><div class="head">Header 2</div>
				</td>
			</tr>
			<tr class="content">
				<td>Some content here</td>
			</tr>
		<!-- end panel -->
		</table>
	</td>
</tr>
<!-- end panel -->

Select allOpen in new window

...And here is the jQuery code:

$(document).ready(function() {
				
	//syntax highlighter
	hljs.tabReplace = '    ';
	hljs.initHighlightingOnLoad();

	//accordion
	$('tr.accordion').accordion({
		//defaultOpen: 'section1',
		speed: 'fast',
		animateOpen: function (elem, opts) { //replace the standard slideUp with custom function
			elem.next().slideFadeToggle(opts.speed);
		},
		animateClose: function (elem, opts) { //replace the standard slideDown with custom function
			elem.next().slideFadeToggle(opts.speed);
		}
	});

	

	//custom animation for open/close
	$.fn.slideFadeToggle = function(speed, easing, callback) {
		return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
	};

});

Select allOpen in new window

Please help!