title: Persistent/External JQuery Mobile Panel
body: <p>In JQuery Mobile 1.4 panels can be external, fixed and responsive which led me to try to create a persistent sidebar using a panel. Everything seems to work great except that the panel is closed every time a page transitions. The panel is then opened again when the new page is shown.</p>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/egntp/" rel="nofollow">http://jsfiddle.net/egntp/</a></p>
  
  <p>I would like for the panel to remain on the page during page transition similar to the way persistent toolbars work.</p>
  
  <p>Any ideas? I looked into the panel's beforeClose() event (<a href="http://api.jquerymobile.com/panel/#event-beforeclose" rel="nofollow">http://api.jquerymobile.com/panel/#event-beforeclose</a>) to try to prevent it from closing, but I didn't know how to proceed.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.css" /&gt;
      &lt;style type="text/css"&gt;
          .ui-panel-dismiss{display:none;}
          #p1, #p2{margin-left:17em;}
      &lt;/style&gt;
      &lt;script src="http://code.jquery.com/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(function(){$("#sidebar").panel();});
          $(document).on("pageshow", ":jqmData(role=page)", function() {
              $("#sidebar").panel("open");
          });
      &lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div data-role="panel" data-animate="false" data-position-fixed="true" data-swipe-close="false" id="sidebar"&gt;
          &lt;h1&gt;sidebar&lt;/h1&gt;
          &lt;a href="#p1"&gt;Page 1&lt;/a&gt;&lt;br /&gt;
          &lt;a href="#p2"&gt;Page 2&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="p1" data-role="page"&gt;
          My page 1
      &lt;/div&gt;
      &lt;div id="p2" data-role="page"&gt;
          My page 2
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>