In my expand/collapse table, I have set up alternating row colors (dark grey and light grey) that adjust automatically when expanding or collapsing.
The challenge I'm facing is that for certain rows, I want to apply a specific background color using the "mainRow" class. However, it appears that due to the Javascript functions in place, the CSS behavior is not as expected.
Check out my code on JSFiddle: http://jsfiddle.net/oampz/JNQx4/1/
HTML:
<table class="tbl tbl--highlight stripes half-mb">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Height</th>
<th>Weight</th>
</tr>
</thead>
<tbody>
<tr class="mainRow">
<td class="ShowMe">+ 0000111</td>
<td>0000111</td>
<td>0000111</td>
<td>0000111</td>
</tr>
<tr id="itsHidden" class="visuallyhidden">
<td>0000222</td>
<td>0000222</td>
<td>0000222</td>
<td>0000222</td>
</tr>
<!-- more rows here -->
</tbody>
</table>
Javascript:
$(function(){
function stripeTable(){
$("table.stripes tr").removeClass("odd");
$("table.stripes tr:visible:odd").addClass("odd");
}
stripeTable();
$(".ShowMe").click(function() {
$("#itsHidden").toggleClass("visuallyhidden");
// Additional rows handling
stripeTable();
});
});
Any assistance would be greatly appreciated!