Q:

Extending Jquery accordion to rows of a table

I have a table with collapsible rows. Please check here
I just want to use the Jquery UI accordion as shown here
I am trying to apply accordion to the below structure :
<table>
    <tbody class="category">
        <tr><td>Category - 1</td></tr>
    </tbody>
    <tbody class="subcategory">
        <tr><td>Sub Cateogry 1.1</td></tr>
        <tr><td>Sub Cateogry 1.2</td></tr>
    </tbody>
    <tbody class="category">
       <tr><td>Category - 2</td></tr>
    </tbody>
    <tbody class="subcategory">
       <tr><td>Sub Cateogry 2.1</td></tr>
    </tbody>
</table>

I understand that ordered list is most suitable for this type of structure.But due to some restrictions, table needs to be used.
Please suggest.

A:

Use the header option of the accordion:
$(document).ready(function () {
    $('table').accordion({header: '.category' });
});

https://jsfiddle.net/c1j7xbkp/

