jquery-ui - 如何创建嵌套可折叠小部件？

Question

如何创建简单的嵌套可折叠小部件？

这是我尝试过的：

<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>

任何帮助将不胜感激。

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>