Opening two panels at the same time with jQuery Mobile

Question

I have the following example code:

JS Demo

<div data-role="page">

  <div data-role="header">
    <h1>Header</h1>
    <a href="#left">left</a>
    <a href="#right" style="margin-right:60px;">right</a>
  </div><!-- /header -->

  <div data-role="panel" id="left" data-theme="a" data-display="overlay" data-position="left" data-dismissible="false"><a href="#right">open right</a><br/><a href="#" data-rel="close">close</a></div>
  <div data-role="panel" id="right" data-theme="a" data-display="overlay" data-position="right" data-dismissible="false"><a href="#left">open left</a><br/><a href="#" data-rel="close">close</a></div>

  <div data-role="content"> 
    <a href="#left" data-rel="panel">open left</a>
    <a href="#right" data-rel="panel">open right</a>
  </div><!-- /content -->

  <div data-role="footer">
    <h4>Footer</h4>
  </div><!-- /footer -->

</div><!-- /page -->

What I would like to do is open two panels at the same time. The problem is that jQuery Mobile automatically closes a panel if you're initiating another. Is there a way to do this by adding a data attribute? Ideally I do not want to start hacking away at the source code in order to achieve this.

EDIT:

When I try to use @keypaul's answer (according to the documentation).

var defer = $("#left").panel().panel("open");
defer = $.Deferred();
defer.then(function(options) {
    $("#right").panel().panel("open", options);
});

I get an error:

Uncaught TypeError: Cannot read property 'options' of undefined

Answer 1

On jquery mobile doc there this example

$( "#idofpanel" ) .panel( "open" ,
     optionsHash ) .then( function(
         options ){
             $( "#idofpanel2" ).panel( "open" , options )
});

Here the link http://demos.jquerymobile.com/1.3.0-beta.1/docs/panels/index.html at the end of opening panel paragraph

Answer 2

Looking at JQuery Mobile 1.3.2 as opposed to 1.3.0-beta.1 it appears this part of the documentation has been removed.

They removed support for having multiple panels opened at once.

This is how I solved it.

//Overrides JQM's default behaviour of having a single modal panel, and instead bases modality on position.
self.overrideModalPanels = function () {
    //remove all panelbeforeopen subscriptions (jquery 1.3.2 source looks like it only uses this to handle panel modality.
    //may change to document on jquery 1.4, check against https://github.com/jquery/jquery-mobile/blob/1.4-stable/js/widgets/panel.js#L260 but on master for versions past 1.4
    //ctrl+f panelbeforeopen
    //$(document).unbind("panelbeforeopen"); //jquery 1.4
    var page = $('#idofpanel').closest(":jqmData(role='page')");
    page.unbind("panelbeforeopen");
    var panels = $(":jqmData(role='panel')");
    panels.each(function (index, element) {
        // Close the panel if another panel on the page opens
        page.on("panelbeforeopen", function (e) {
            var position = $(element).jqmData("position");
            position = position ? position : "left";
            var position2 = $(e.target).jqmData("position");
            position2 = position2 ? position2 : "left";
            var positionsMatch = position === position2;
            //if positions are the same, and there is a panel already open, that isn't the one opening now.
            if (positionsMatch && $(element).hasClass("ui-panel-open") && (e.target !== element)) { //roughly equivalent to if ( self._open && e.target !== self.element[ 0 ] ) {
                $(element).panel("close");
            }
        });
    });