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.

<div data-role="panel" id="bioPanel" data-theme="a">
    <ul id="menu">
        <li><a href="#Bio">Bio</a>
        </li>
        <li><a href="#Media">Media</a>
        </li>
        <li><a href="#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