I'm attempting to implement an accordion feature for each row of an HTML table using the script provided below
HTML
<table class="list" id="table" data-bind="visible: !loading()">
@*<table class="productTable" data-bind="sortTable:true">*@
<thead>
<tr>
<th>Product</th>
<th>Term</th>
<th>Location</th>
<th>Pipeline</th>
<th>Bid C/P</th>
<th>Bid Volume</th>
<th>Index</th>
<th>Bid</th>
<th>Offer</th>
<th>Offer Volume</th>
<th>Offer C/P</th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: canadiancrudes" >
<tr class="accordion">
<td data-bind="text:Product"></td>
</tr>
<tr class="" data-bind="template: { name: $root.displayMode, data: $data }"></tr>
</tbody>
</table>
2. Java Script
$(function () {
var $list = $('.list');
$list.find("tr").not('.accordion').hide();
$list.find("tr").eq(0).show();
$list.find(".accordion").click(function () {
$(this).fadeTo("fast", 1);
$list.find('.accordion').not(this).siblings().fadeOut(500);
$(this).siblings().fadeToggle(500);
$(this).addClass('active');
$list.find('.accordion').not(this).removeClass('active');
$list.find('.accordion').not(this).css("opacity", 0.33);
$list.find('.accordion').not(this).hover(function () {
$(this).fadeTo("fast", 1);
},
function () {
$(this).fadeTo("fast", 0.33);
});
});
});
CSS
#table tbody .accordion:hover td:first-child, #table tbody .accordion.active td:first-child{
border-left:3px solid #000; float:left; overflow: hidden; padding-left: 5px; width:100%;
}
.active{opacity:1!important;}
#table tbody tr td{
background-color:#ccc;
}
For some reason, my accordion isn't functioning as expected with the code above. Can you help me identify where I might be going wrong?