Jquery Mobile - Panels With Multiple Internal Pages

I want to be able to use a sliding panel, and when the user selects an option from within the sliding panel, it to load a new page found internally within same html file. So far, I

Solution 1:

You can use an external panel for this: http://demos.jquerymobile.com/1.4.5/panel-external/

Pull your panel out of the individual pages and place it as a child of the body element. Make sure you apply a data-theme to it, as it has no container to inherit themes from.

<divdata-role="panel"id="bioPanel"data-theme="a"><ulid="menu"><li><ahref="#Bio">Bio</a></li><li><ahref="#Media">Media</a></li><li><ahref="#Booking">Booking</a></li></ul></div>

Then on document ready, initialize the widget as a panel and also initialize the listview within it:

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

Here is a working DEMO

Solution 2:

You can use an external panel:

Jquery Mobile External panel demo