Soumya Soumya - 9 days ago 5
jQuery Question

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.

Answer

Use the header option of the accordion:

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

http://jsfiddle.net/8Xyjy/14/