Expand/Collapse table rows with nested rows
===

I want to create a table with the following structure: <br>
Row1          datacolumn1 datacolumn2 datacolumn2<br>
 SubRow1      datacolumn1 datacolumn2 datacolumn2<br>
  SubRow2     datacolumn1 datacolumn2 datacolumn2<br>
   SubRow3    datacolumn1 datacolumn2 datacolumn2<br>

I want to the subrows to expand/collapse on click. I just cant seem to make it work with tables. I know lists would be a better option but tables are much easier to maintain. 

    <tbody>
		<tr class="row1 head1">
			<td>Cash and Equivalents</td>
			<td>000,000</td>
			<td>000,000</td>
			
		</tr>
		<tr class="row1 head2 closed">
			<td>Cash and Equivalents</td>
			<td>000,000</td>
			<td>000,000</td>
			
		</tr>
		<tr class="row1 head3">
			<td>Cash and Equivalents</td>
			<td>000,000</td>
			<td>000,000</td>
			
		</tr>
		<tr class="row1 head4">
			<td>Cash and Equivalents</td>
			<td>000,000</td>
			<td>000,000</td>
			
		</tr>
		<tr class="row1 head5">
			<td>Cash and Equivalents</td>
			<td>000,000</td>
			<td>000,000</td>
			
		</tr>
		<tr class="row2 head1">
			<td>Cash and Equivalents</td>
			<td>000,000</td>
			<td>000,000</td>
			
		</tr>
		
		<tr class="row2 head4">
			<td>Cash and Equivalents</td>
			<td>000,000</td>
			<td>000,000</td>
			
		</tr>
		<tr class="row2 head5">
			<td>Cash and Equivalents</td>
			<td>000,000</td>
			<td>000,000</td>
			
		</tr>
		<tr>
			<td>Cash and Equivalents</td>
			<td>000,000</td>
			<td>000,000</td>
			
		</tr>
		<tr>
			<td>Cash and Equivalents</td>
			<td>000,000</td>
			<td>000,000</td>
			
		</tr>
		
	</tbody>

on row click, i call the following function: 

    holdingsTree: function(that){
		var stack = '',
			classes = ba.splitClasses(that.attr('class')),
			nextRow = ba.getClassNumber(classes[1], "head");

		if (that.next().hasClass('head'+nextRow)){
			if (that.next().hasClass(classes[0]) && that.next().hasClass('open')){
				that.nextUntil('.head1').hide().addClass('closed').removeClass('open');
			} else if (that.next().hasClass(classes[0])){
				stack = that.nextUntil('.head1');
				$.each(stack, function(i, item){ if ($(item).hasClass('head' + (nextRow))){ $(this).show().addClass('open').removeClass('closed'); } });
			}
		} else if (that.next().hasClass('head'+ (nextRow+1))){
			if (that.next().hasClass(classes[0]) && that.next().hasClass('open')){
				that.nextUntil('.head1').hide().addClass('closed').removeClass('open');
			} else if (that.next().hasClass(classes[0])){
				stack = that.nextUntil('.head1');
				$.each(stack, function(i, item){ if ($(item).hasClass('head' + (nextRow+1))){ $(this).show().addClass('open').removeClass('closed'); } });
			}
		} else if (that.next().hasClass('head'+ (nextRow+2))){
			if (that.next().hasClass(classes[0]) && that.next().hasClass('open')){
				that.nextUntil('.head1').hide().addClass('closed').removeClass('open');
				return;
			} else if (that.next().hasClass(classes[0])){
				stack = that.nextUntil('.head'+	(nextRow+3));
				$.each(stack, function(i, item){ if ($(item).hasClass('head' + (nextRow+2))){ $(this).show().addClass('open').removeClass('closed'); } });
				//stack.find('.head'+(nextRow+2)).show().addClass('open').removeClass('closed');
			}
		} else if (that.next().hasClass('head'+ (nextRow+3))){
			if (that.next().hasClass(classes[0]) && that.next().hasClass('open')){
				that.nextUntil('.head1').hide().addClass('closed').removeClass('open');
			} else if (that.next().hasClass(classes[0])){
				stack = that.nextUntil('.head1');
				$.each(stack, function(i, item){ if ($(item).hasClass('head' + (nextRow+3))){ $(this).show().addClass('open').removeClass('closed'); } });
			}
		} else if (that.next().hasClass('head'+ (nextRow+4))){
			if (that.next().hasClass(classes[0]) && that.next().hasClass('open')){
				that.nextUntil('.head1').hide().addClass('closed').removeClass('open');
			} else if (that.next().hasClass(classes[0])){
				that.nextUntil('.head1').show().addClass('open').removeClass('closed');
			}
		} 

	},

	splitClasses: function(names){
		var names = names.split(' ');
		return names;
	},

	getClassNumber: function(name, pretext){
		var result = name.split(pretext);
		console.log(parseInt(result[1]) + 1);
		return parseInt(result[1]) + 1;
	}


ITs very bad. I know. :)