I am populating the data dynamically.
However, the Accordion feature is not functioning correctly.
JSFiddle link
http://jsfiddle.net/aff4vL5g/360/
Please note: I am unable to modify the HTML structure.
Current table
Desired output
The first accordion should display child elements upon clicking.
The second accordion should also display child elements upon clicking.
Where could I be making a mistake?
HTML
<table>
/* first parent */
<tr>
<td>
<a href="#">
<div id="accordion"></div>
</a>
</td>
<td><a href="#">Profit</a></td>
<td>35%</td>
<td>22%</td>
</tr>
/* first child */
<tr class="parentTR">
<td></td>
<td>
<a href="#" >
<div id="accordion"></div>
Business - 1
</a>
</td>
<td>35%</td>
<td>22%</td>
</tr>
/* second child */
<tr class="parentTR">
<td></td>
<td>
<a href="#">
<div id="accordion"></div>
Business - 2
</a>
</td>
<td>38%</td>
<td>28%</td>
</tr>
/* second parent*/
<tr>
<td>
<a href="#">
<div id="accordion"></div>
</a>
</td>
<td><a href="#">Loss</a></td>
<td>15%</td>
<td>12%</td>
</tr>
/* first child of second parent */
<tr class="parentTR">
<td></td>
<td>
<a href="#" >
<div id="accordion"></div>
Business - 1
</a>
</td>
<td>35%</td>
<td>22%</td>
</tr>
/* second child of second parent */
<tr class="parentTR">
<td></td>
<td>
<a href="#">
<div id="accordion"></div>
Business - 2
</a>
</td>
<td>38%</td>
<td>28%</td>
</tr>
</table>
JQuery
$(function () {
// Accordion Panels
$(".parentTR").hide();
$("a .accordion ").click(function () {
$(this).next(".parentTR").slideToggle("slow").siblings(".parentTR:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings(".accordion").removeClass("active");
});
});
Any assistance would be greatly appreciated.
Thank you!