Jquery Mobile Panel hides flexslider when opened

Question

I am trying to use jquery mobile panels and it hides the slider when I open the panel, it removes/hides the slider. Adding rel="external" to the button for panel doesn't do anything as it is not a link to physical page.

Here is an example given in fiddle:

http://jsfiddle.net/dhavaljani/zZKhT/

Html for panel

<div data-role="panel" id="rightpanel2" data-position="right" data-display="push" data-theme="d" data-content-theme="d">`
  <ul data-role="listview" data-theme="d" data-icon="false">
    <li><a href="#" data-icon="false">Home</a></li>
    <li><a href="#" data-icon="false">Services</a></li>
    <li><a href="#" data-icon="false">Case Studies</a></li>
    <li><a href="#" data-icon="false">About Us</a></li>
    <li><a href="#" data-icon="false">Contact Us</a></li>
  </ul>
  <a href="#demo-links" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-e ui-icon-phone ui-btn-icon-left ui-btn-inline orange-btn">123-456-7890</a>
</div>

Answer 1

This is a bug in jQuery Mobile 1.4, as panel when first opened, it wraps it's siblings in a <div class="ui-panel-wrapper"> other than header and footer.

This problem isn't present in previous versions of jQuery Mobile.

<section class="slider ui-panel-wrapper">
 <!-- elements -->
</section>

Demo