Collapsible listview in a jquery mobile external panel not displaying correctly

Question

Can anyone please help me?

I'm trying to create a menu inside an external jquery mobile panel. This is JQM 1.4.0 that supports external panels.

I have a collapsible listview inside the external panel. There is some kind of inset applied that I don't seem to be able to get rid off for submenu3 and inside it as well.

Please check out my fiddle: http://jsfiddle.net/UHYz9/2/

Here's the html:

<div data-role="page" class="jqm-demos" data-quicklinks="true">
    <div data-role="header">
        <h1>External panels</h1>
    </div>
    <div role="main" class="ui-content jqm-content jqm-fullwidth">
        <a href="#externalpanel" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini">Open External Panel</a>
    </div>
</div>
<div data-role="panel" id="externalpanel" data-position="left" data-display="reveal" data-theme="a">
<h3>Menu</h3>
        <ul data-role="listview" style="padding-right: 8px">
      <li><a href="#">Submenu 1</a></li>
      <li><a href="#">Submenu 2</a></li>
      <li data-role="collapsible" data-iconpos="right" data-inset="false">
        <h2>Submenu 3</h2>
        <ul data-role="listview">
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
          <li><a href="#">Item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Submenu 4</a></li>
      <li><a href="#">Submenu 5</a></li>
    </ul>
</div>

Here's the js:

$(function() {
    $("body>[data-role='panel']").panel();
    $("#externalpanel ul").listview();
    $("#externalpanel").trigger("create");
});

For this to work, please include the following css and js links:

http://demos.jquerymobile.com/1.4.0/css/themes/default/jquery.mobile-1.4.0.min.css

http://demos.jquerymobile.com/1.4.0/js/jquery.js

http://demos.jquerymobile.com/1.4.0/js/jquery.mobile-1.4.0.min.js

Thanks a lot!

Answer 1

1. You need to wrap contents on panel in <div data-role="content"> or `.

2. To enhance content of panel or any other div, use .enhanceWithin().

   $(function () {
    $("body>[data-role='panel']").panel().enhanceWithin();
   });
   

Demo