1. <div data-role="panel" data-position="left" data-position-fixed="false"
2.     data-display="push" id="nav-panel" data-theme="a">
3.     <ul data-role="listview" data-inset="false" data-theme="a" data-divider-theme="a" style="margin-top: -16px;" class="nav-search"
4.         data-count-theme="b">
5.         <li data-icon="delete" style="background-color: #111;">
6.             <a href="#" data-rel="close">Close</a>
7.         </li>
8.         <li data-icon="back">
9.             <a href="#demo-intro" data-rel="back">Back</a>
10.         </li>
11.         <li data-icon="home">
12.             <a href="/action/home">Home</a></li>
13.         </c:if>
14.         <li class="custom-li">
15.             <div data-role="collapsible" class="custom-collapsible collapsibleMenu" data-theme="a" data-iconpos="right">
16.                 <h4>Test Category</h4>
17.                 <ul data-role="listview">
18.                     <li>
19.                         <a href="/action/calcExperienceNeeded">Test 1</a>
20.                     </li>
21.                     <li>
22.                         <a href="/action/calcExpNeededFor212">Test 2</a>
23.                     </li>
24.                     <li>
25.                         <a href="/action/calcLevelWithExperience">Test 3</a>
26.                     </li>
27.                 </ul>
28.             </div>
29.         </li>
30.     </ul>
31. </div>   
32.        
    

The problem is that if you try to scroll the panel vertically it sometimes does not scroll if you happen to start scrolling on top of a list item that is collapsible.  Is there a better way of making the new panel have collapsible entries?