How to create a Nested Collapsible widget? - jquery-ui

Question

How can i create simple nested collapsible widget ?
This is what i've tried :
<div data-role="collapsible" data-theme="b">
<h2>2KB</h2>
<table border="1">
<thead>
<tr>
<td>Description</td>
<td>Week number</td>
<td>Total demand</td>
<td>Average daily on demand</td>
<td>Quantity on hand</td>
<td>Days stock on hand</td>
</thead>
<tbody id="warehouseList" padding="0">
<div data-role="collapsible"></div>
</tbody>
<tfoot></tfoot>
</table>
</div>
Any help will be hihgly appreciated.

Answer 1

<div data-role="page">
<div id="accordion">
<div data-role="collapsible">
<h3 data-role="header"> Some top level contents </h3>
<ul data-role="listview">
<li> contents </li>
</ul>
</div>
<div data-role="collapsible">
<h3 data-role="header"> Some top level contents </h3>
<ul data-role="listview">
<li> contents </li>
</ul>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#accordion').accordion({header: 'h3'});
$('#accordion').accordion('activate', 2);
});
</script>